多个按钮单击的javascript问题

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

您正在将输出值设置为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 个解决方案

解决方案1
0 2018-10-24 20:02:41

解决方案2
0 2018-10-24 20:05:22

多个按钮单击的javascript问题

问题描述

2 个解决方案

解决方案1 0 2018-10-24 20:02:41

解决方案2 0 2018-10-24 20:05:22

解决方案1
0 2018-10-24 20:02:41

解决方案2
0 2018-10-24 20:05:22