JavaScript 计算器问题

JavaScript Calculator problems

本文关键字：问题计算器 JavaScript 更新时间：2023-09-26

我在 JavaScript 上搞砸了一点，决定做一个计算器。现在我想要它做的只是将按下的按钮输入到答案框中，但我无法使其工作，我认为我的功能有问题，但我无法弄清楚是什么，请帮忙......

<!DOCTYPE html>
<html>
<body>
  <script>
    var one = function() {
      document.getElementById("input").innerHTML = "1"
    }
    function two() {
      document.getElementById("input").innerHTML = "2"
    }
    function three() {
      document.getElementById("input").innerHTML = "3"
    }
    function four() {
      document.getElementById("input").innerHTML = "4"
    }
    function five() {
      document.getElementById("input").innerHTML = "5"
    }
    function six() {
      document.getElementById("input").innerHTML = "6"
    }
    function seven() {
      document.getElementById("input").innerHTML = "7"
    }
    function eight() {
      document.getElementById('input').innerHTML = "8"
    }
    function nine() {
      document.getElementById('input').innerHTML = "9"
    }
    function zero() {
      document.getElementById('input').innerHTML = "0"
    }
    function minimum() {
      document.getElementById('input').innerHTML = "<"
    }
    function maximum() {
      document.getElementById('input').innerHTML = ">"
    }
    function add() {
      document.getElementById('input').innerHTML = "+"
    }
    function substract() {
      document.getElementById('input').innerHTML = "-"
    }
    function multiply() {
      document.getElementById('input').innerHTML = "*"
    }
    function divide() {
      document.getElementById('input').innerHTML = "/"
    }
    function calculate() {}
    function reset() {}
  </script>
  <table border="1">
    <tr>
      <td colspan="4">
        <table border="1">
          <tr>
            <td>
              <input type="text" value="Answer" id="input">
            </td>
          </tr>
        </table>
      </td>
      <tr>
        <td>
          <input type="button" value="1" onclick="one()">
        </td>
        <td>
          <input type="button" value="2" onclick="two()">
        </td>
        <td>
          <input type="button" value="3" onclick="three()">
        </td>
        <td>
          <input type="button" value="+" onclick="add()">
        </td>
      </tr>
      <tr>
        <td>
          <input type="button" value="4" onclick="four()">
        </td>
        <td>
          <input type="button" value="5" onclick="five()">
        </td>
        <td>
          <input type="button" value="6" onclick="six()">
        </td>
        <td>
          <input type="button" value="- " onclick="substract()">
        </td>
      </tr>
      <tr>
        <td>
          <input type="button" value="7" onclick="seven">
        </td>
        <td>
          <input type="button" value="8" onclick="eight">
        </td>
        <td>
          <input type="button" value="9" onclick="nine">
        </td>
        <td>
          <input type="button" value="* " onclick="multiply()">
        </td>
      </tr>
      <tr>
        <td>
          <input type="button" value="<" onclick="minimum">
        </td>
        <td>
          <input type="button" value="0" onclick="zero">
        </td>
        <td>
          <input type="button" value=">" onclick="maximum">
        </td>
        <td>
          <input type="button" value="/ " onclick="divide()">
        </td>
      </tr>
      <tr>
        <td colspan="3">
          <input type="button" value="      Calculate!      " onclick="calculate()">
        </td>
        <td>
          <input type="button" value="C" onclick="reset()">
        </td>
      </tr>
  </table>
</body>
</html>

您需要设置输入元素的值属性，而不是 innerHTML，例如：

document.getElementById("input").value = "1"

如果要

将单击按钮的值设置为答案字段，只需使用以下命令：

演示

var a = document.querySelectorAll('input[type=button]');
for (var i = 0;i<a.length;i++) {
   a[i].addEventListener('click',addthis);
}
function addthis() {
   document.getElementById('input').value = this.value;    
}

请注意，输入字段具有可以更改的值，而不是内部HTML

而且你不需要html中的所有内联javascript，querySelectorAll可以完成这项工作。

 <table border="1">
    <tr>
      <td colspan="4">
        <table border="1">
          <tr>
            <td>
              <input type="text" value="Answer" id="input">
            </td>
          </tr>
        </table>
      </td>
      <tr>
        <td>
          <input type="button" value="1" >
        </td>
        <td>
          <input type="button" value="2" >
        </td>
        <td>
          <input type="button" value="3" >
        </td>
        <td>
          <input type="button" value="+" >
        </td>
      </tr>
      <tr>
        <td>
          <input type="button" value="4" >
        </td>
        <td>
          <input type="button" value="5" >
        </td>
        <td>
          <input type="button" value="6" >
        </td>
        <td>
          <input type="button" value="- " >
        </td>
      </tr>
      <tr>
        <td>
          <input type="button" value="7" >
        </td>
        <td>
          <input type="button" value="8">
        </td>
        <td>
          <input type="button" value="9">
        </td>
        <td>
          <input type="button" value="*">
        </td>
      </tr>
      <tr>
        <td>
          <input type="button" value="<" >
        </td>
        <td>
          <input type="button" value="0">
        </td>
        <td>
          <input type="button" value=">">
        </td>
        <td>
          <input type="button" value="/">
        </td>
      </tr>
      <tr>
        <td colspan="3">
          <input type="button" value="      Calculate!      ">
        </td>
        <td>
          <input type="button" value="C" >
        </td>
      </tr>
  </table>
</body>
</html>

作为旁注，为了使您的代码更好地维护，我将答案输入字段中的 id 更改为更精确的内容，例如"答案"，因为输入可能会有点混乱。

尝试：

 var one = function() {
   document.getElementById("input").value = "1"
 }