Question

我是javascript新手，只想制作一个简单的网页，用户在其中输入数字（id =“ number”），然后单击几个按钮（btn6或btn7 ect）之一，然后将输入的数字乘以按钮上的数字。下面的代码有效，但是如果多次单击该按钮，则无效。为什么会这样，我该如何更改？

<html>

<head>
  <title>L100 variables</title>
</head>

<body>
  <p>Please enter a number </p>
  <input type="text" id="number">

  <button id="btn2"> x2</button>
  <button id="btn6"> x6</button>
  <button id="btn7"> x7</button>
  <button id="btn78"> x78</button>
  <button id="btn90"> x90</button>


  <p id="output"> </p>

  <script>
    document.getElementById("btn2").onclick = function() {

      var input = document.getElementById("number").value;
      var output = input * 2;
      document.getElementById("output").innerHTML = output;
    }
  </script>

</body>

</html>

Answer 1

您正在将 output 的值设置为input * 2。再次单击该按钮就可以了：将输入的值乘以2，然后将其发送到输出。如果在此期间输入值未更改，则输出值将相同，并且外观就像再次单击按钮一样。

如何解决此问题取决于您想要的确切行为。如果您想连续多次乘以输入，并且每次都增加它，那么您要做的就是设置输入元素的值而不是输出元素的值，就像这样：

<html>

<head>
  <title>L100 variables</title>
</head>

<body>
  <p>Please enter a number </p>
  <input type="text" id="number">

  <button id="btn2"> x2</button>
  <button id="btn6"> x6</button>
  <button id="btn7"> x7</button>
  <button id="btn78"> x78</button>
  <button id="btn90"> x90</button>

  <p id="output"> </p>

  <script>
    document.getElementById("btn2").onclick = function() {

      var inputElement = document.getElementById("number");
      var input = inputElement.value;
      var output = input * 2;
      inputElement.value = output;

      // optional:
      document.getElementById("output").innerHTML = output;
    }
  </script>

</body>

</html>

Answer 2

它正在工作，而不是您想象的那样。当前，您正在将输入乘以2，而输出将是输入*2。如果您持续按下乘以2的按钮，则输入将保持不变，因此您的输出将保持不变。如果您希望自己的行为一遍又一遍地乘以2，则需要将输入也调整为也乘以2。

类似的东西：

    document.getElementById("number").value = output;

多个按钮单击的javascript问题

2 个答案: