Question

我在搞乱JavaScript时决定制作一个计算器。现在我想要它做的就是在回答框中输入按下的按钮，但是我无法使其工作，我认为我的功能出了问题，但我无法弄清楚是什么，请帮忙......

＆＃13;

<!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>

＆＃13;

Answer 1

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

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

Answer 2

尝试：

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

Answer 3

如果要将单击按钮的值设置为答案字段，可以直接使用：

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更改为更精确的内容，例如＆＃34; answer＆＃34;因为输入可能有点令人困惑。

JavaScript计算器问题

3 个答案: