时间戳

首页 > 解决方案 > 多个按钮单击的javascript问题

javascript - 多个按钮单击的javascript问题

问题描述

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

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

标签： javascriptbuttononclick

解决方案

您正在将输出的值设置为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>

推荐阅读