如何在 Javascript 中使用计算器在文本字段中显示值答案

【问题标题】：How to display value in textfield with a calculator in Javascript如何在 Javascript 中使用计算器在文本字段中显示值
【发布时间】：2020-01-18 09:37:28
【问题描述】：

所以，正如您在我的代码中看到的那样，无论我点击什么按钮，它都会输出到控制台。我希望它显示在输入类型 =“文本字段”中，我可能错过了一些可以相互计算两个数字的逻辑。请记住，我是 Javascript 新手，这是我的第一个项目。

我需要在文本字段中显示总和。

const buttons = document.querySelectorAll("input[type=button]");
const length = buttons.length;
for (let i = 0; i < length; i++) {
  buttons[i].addEventListener("click", handle);
}

function handle(event) {
  const value = event.target.value;
  switch (value) {
    case "+":
      console.log("+ was clicked");
      break;
    case "-":
      console.log("- was clicked");
      break;
    case "*":
      console.log("+ was clicked");
      break;
    case "/":
      console.log("/ was clicked");
      break;
    default:
      //console.log("%s was clicked", value);
      var myInput = document.getElementById("equal");
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Dizzy Calculator</title>
</head>

<body bgcolor="#b3b3cc" text="white">
  <form name="calculator">
    <h1>Calculator</h1>
    <div class="num">
      <tr>
        <td>
          <input type="button" value="1">
          <input type="button" value="2">
          <input type="button" value="3">
          <input type="button" value="+">
        </td>
      </tr>
      <br>
      <tr>
        <td>
          <input type="button" value="4">
          <input type="button" value="5">
          <input type="button" value="6">
          <input type="button" value="-">
        </td>
      </tr>
      <br>
      <tr>
        <td>
          <input type="button" value="7">
          <input type="button" value="8">
          <input type="button" value="9">
          <input type="button" value="*">
        </td>
      </tr>
      <br>
      <tr>
        <td>
          <input type="button" value="/">
          <input type="button" value="0">
          <input type="reset" value="Reset">
        </td>
      </tr>
      <br>
      <input type="button" value="=" id="equal" onClick="document.calculator.ans.value=eval(document.calculator.ans.value)">
      <br>Solution is <input type="textfield" name="ans" value="">
    </div>
  </form>
</body>

</html>

【问题讨论】：

你尝试了什么？
首先，检查w3schools.com/tags/att_input_type.asp 的输入类型。 textfield 是 text 之后，设置和输入字段，检查这里：stackoverflow.com/questions/5700471/…

标签： javascript html calculator

【解决方案1】：

首先，我会在您的文本字段中添加一个 ID。

<input id="textfield" type="text" name="ans" value="">

然后添加一些代码以将您单击的数字附加到文本字段。

default:
  //console.log("%s was clicked", value);
  var myInput = document.getElementById("equal");

  // add value of button to textfield
  document.getElementById("textfield").value += value;

您还必须添加代码来处理数学运算。尝试使用上面的代码，如果遇到困难，请发布。

【讨论】：

type="textfield"?
@HereticMonkey 哎呀，我刚刚复制了 OPs 代码。谢谢！
这项工作到目前为止，唯一不会显示的是操作符，你对我如何处理数学逻辑有什么建议吗？
嗨，我已经修改了一些代码，在这里查看：jsfiddle.net/mqkndyv7/1

【解决方案2】：

计算器太棒了！

看起来您正在使用输入来显示内容，我建议您使用其他东西，尝试制作一个

元素。

给你选择的元素一个ID并使用

document.getElementById("idOfElement").innerHTML = varaibleToDisplay;

idOfElement 应该是您的元素 ID。 variableToDisplay 是要在元素中显示的变量

【讨论】：

【解决方案3】：

你可以这样做。用我的代码替换你的代码。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head>
   <title>Dizzy Calculator</title>
</head>
<body bgcolor="#b3b3cc" text="white">
   <form name="calculator">
   <h1>Calculator</h1>
   <div class="num">
       <tr>
           <td>
               <input type="button" id="1" value="1">
               <input type="button" id="2" value="2">
               <input type="button" id="3" value="3">
               <input type="button" id="plus" value="+">
           </td>
       </tr>
       <br>
       <tr>
           <td>
               <input type="button" id="4" value="4">
               <input type="button" id="5" value="5">
               <input type="button" id="6" value="6">
               <input type="button" id="minus" value="-">
           </td>
       </tr>
       <br>
       <tr>
           <td>
               <input type="button" id="7" value="7">
               <input type="button" id="8" value="8">
               <input type="button" id="9" value="9">
               <input type="button" id="mult" value="*">
           </td>
       </tr>
       <br>
       <tr>
           <td>
               <input type="button" id="divide" value="/">
               <input type="button" id="0" value="0">
               <input type="reset" value="Reset">
           </td>
       </tr>
   <br>
       <input type="button" value="=" id="equal" onClick="document.calculator.ans.value=eval(document.calculator.ans.value)">
     <br>Solution is <input type="textfield" name="ans" value="" id="ans">
   </div>
   </form>
   <script>
       const buttons = document.querySelectorAll("input[type=button]");
       const length = buttons.length;
       for (let i = 0; i < length; i++)
           {
               buttons[i].addEventListener("click", handle);
           }
       function handle(event)
       {
           const value = event.target.value;
           switch(value)
           {
               case "+":
                   console.log("+ was clicked");
                   break;
               case "-":
                   console.log("- was clicked");
                   break;
               case "*":
                   console.log("+ was clicked");
                   break;
               case "/":
                   console.log("/ was clicked");
                   break;
               default:
               //console.log("%s was clicked", value);
               var myInput = document.getElementById("equal");
           }
       }
       $('#1').click(function(){
           $("#ans").val($('#ans').val() + 1);
       });
$('#2').click(function(){
 $("#ans").val($('#ans').val() + 2);
});
$('#3').click(function(){
 $("#ans").val($('#ans').val() + 3);
});
$('#4').click(function(){
 $("#ans").val($('#ans').val() + 4);
});
$('#5').click(function(){
 $("#ans").val($('#ans').val() + 5);
});
$('#6').click(function(){
 $("#ans").val($('#ans').val() + 6);
});
$('#7').click(function(){
 $("#ans").val($('#ans').val() + 7);
});
$('#8').click(function(){
 $("#ans").val($('#ans').val() + 8);
});
$('#9').click(function(){
 $("#ans").val($('#ans').val() + 9);
});
$('#0').click(function(){
 $("#ans").val($('#ans').val() + 0);
});
$('#plus').click(function(){
 $("#ans").val($('#ans').val() + "+");
});
$('#minus').click(function(){
 $("#ans").val($('#ans').val() + "-");
});
$('#divide').click(function(){
 $("#ans").val($('#ans').val() + "/");
});
$('#mult').click(function(){
 $("#ans").val($('#ans').val() + "*");
});
   </script>
</body>

【讨论】：

您好，Foram，感谢您的回复。你能解释一下 $ 的用途吗？我是 Javascript 新手。
一个简单的计算器应用不需要引入jQuery。
它是为 Jquery 设计的。
对不起，但不是我要求的。