JavaScript 计算器问题答案

【问题标题】：JavaScript Calculator problemsJavaScript 计算器问题
【发布时间】：2014-12-17 18:26:42
【问题描述】：

我对 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>

【问题讨论】：

不是一个解决方案，而是一个小技巧：查看函数参数。
您还使用 > 标记未编码的 html 属性，这可能会破坏某些浏览器中的 html 呈现。

标签： javascript calculator

【解决方案1】：

需要设置input元素的value属性，而不是innerHTML，例如：

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

【讨论】：

【解决方案2】：

如果你想将点击按钮的值设置为答案字段，你可以简单地使用这个：

DEMO

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;    
}

请注意，输入字段有一个您可以更改的值，而不是innerHTML

而且您不需要 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 更改为更精确的内容，例如“答案”作为输入可能会有点混乱。

【讨论】：

感谢您的回答，这很好，但我的代码仍然无法正常工作，当我按下按钮时，“答案”字段中没有任何反应，我一直在尝试 W3Schools.com 示例，它们可以工作，但在我使用您的解决方案或 Max Meijer 和 Buster 提供的解决方案后，我的代码不会。
您的 html 下方或上方是否有 javascript？您需要将其放在 html 下方并将其包装在 window.onload = function () { js code here } 中，以确保在 js 尝试查找元素之前加载 DOM @DovydasGirdvainis
成功了！谢谢，现在让它像计算器一样工作，有没有办法添加文本而不是覆盖？

【解决方案3】：

试试：

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

【讨论】：

按钮有一个 onclick 监听器调用这个函数。