Question

我正在尝试使其与用户输入的两个数字相加，并将其打印在p标记内。任何帮助将非常感激。这是代码：

<html>
<!DOCTYPE HTML>
<meta charset="UTF-8" name="viewport" content="width=device-width">
<head>
    <title>Calculator</title>
</head>
<body>
    <h2>Enter in the values you want to add</h2>
    <form>
        <input id="num1" name="num1" type="number"> //value one
        </br>
        <input id="num2" name="num2" type="number"> //value two
        <button id="calculate">Calculate</button> //Click to calculate
    </form>
    <p id="p">The answer will show here</p>
    <script>
        var p1=document.getElementById("p");
        var p=p1.innerHTML;
        var calc=document.getElementById("calculate");
        calc.addEventListener("click", answer); //When the button is clicked it calls the function answer()
        function answer() {
            var num1=document.getElementById("num1");
            var num2=document.getElementById("num2");
            var x=num1.innerHTML;
            var y=num2.innerHTML;
            p=x+y; //print the sum of the two values, inside of the p tag
        }
    </script>
</body>

Answer 1

p = p1.innerHTML

将段落内容复制到变量p中。

所以你

p = x+y

仅将新值分配给变量p，并且不更改段落的innerHTML。

尝试

p1.innerHTML = (x + y) + '';   // + '' converts the result of x + y to a string

您还应该使用'.value'而不是'.innerHTML'来获取输入的内容，然后在添加它们之前使用parseInt（）将它们转换为数字。

Answer 2

要解码JavaScript中发生的事情，请参阅我的代码注释：

var p1=document.getElementById("p");  // Stores a reference to an element with id "p" to variable p1
var p=p1.innerHTML;  // Retrieves the HTML contents of said attribute and assigns it to variable p (not needed)
var calc=document.getElementById("calculate");  // Stores a reference to an element with id "calc" (your button) to variable calc
calc.addEventListener("click", answer);  // Attaches an event handler to the element referenced via variable calc
function answer()
  {
  var num1=document.getElementById("num1");  // Stores a reference to an element with id "num1" in variable num1
  var num2=document.getElementById("num2");  // Stores a reference to an element with id "num2" in variable num2
  var x=num1.innerHTML;  // Retrieves the HTML contents of the element referenced by num1 and stores it in variable x (error)
  var y=num2.innerHTML;  // Retrieves the HTML contents of the element referenced by num2 and stores it in variable y (error)
  p=x+y;  // Since both x and y are strings, they are concatenated and the result is stored in variable p (produces wrong result)
// Missing assignment of result to output element
  }

问题：您没有一条语句实际上将结果分配给标有ID“ p”的段落，而是您正在修改变量。
此外，由于您是从输入字段中检索字符串，因此加法实际上是串联，产生错误的结果（访问实际值需要num1.value和num2.value）。我还建议将事物转换为整数-parseInt可以解决问题。

Answer 3

有很多问题；您无法复制p的innerHTML，然后为其分配值。您必须将输入值转换为整数才能相加。通过输入，您可以要求输入其“值”，而不是innerHTML。

<html>
<!DOCTYPE HTML>
<meta charset="UTF-8" name="viewport" content="width=device-width">
<head>
    <title>Calculator</title>
</head>
<body>
    <h2>Enter in the values you want to add</h2>
    <form>
        <input id="num1" name="num1" type="number"> //value one
        </br>
        <input id="num2" name="num2" type="number"> //value two
        <button id="calculate">Calculate</button> //Click to calculate
    </form>
    <p id="p">The answer will show here</p>
    <script>
        var p1=document.getElementById("p");
        var calc=document.getElementById("calculate");
        calc.addEventListener("click", answer); //When the button is clicked it calls the function answer()
        function answer(e) {
            e.preventDefault();
            var num1=document.getElementById("num1");
            var num2=document.getElementById("num2");
            var x=parseInt(num1.value, 10);
            var y=parseInt(num2.value, 10);
            p1.innerHTML = x+y; //print the sum of the two values, inside of the p tag
        }
    </script>
</body>
</html>

Answer 4

您的代码中有几个错误，将尝试一一解决：

默认情况下，<button> 是type="submit"，当按下该键时会刷新整个页面，而不是预期的行为。要解决此问题，只需添加type="button"，就可以使其像一个按钮一样，其本身不执行任何操作。
p=x+y 的结果，您什么也没做。 p只是一个包含操作结果的变量，但是您需要将其插入<p>标记内才能显示。将其添加到answer()函数的末尾即可解决问题：p1.innerHTML = p;。
<input>值，这些值存储在value属性中，而不是innerHTML中。因此看起来应该像这样var x=num1.value;和var y=num2.value;。
“和” ，在JavaScript中，+运算符既可以用于添加数值，也可以用于连接字符串，然后引擎根据您使用的值的类型（在您的情况下为strings）选择要进行的猜测。因为即使您在输入中输入1，以后再用.values检索它，也将以字符串形式返回它。您必须将其强制转换为数字才能获得所需的结果。 var x=Number(num1.value);和var y=Number(num2.value);就足够了。

仅此而已。

在这里，您的代码已应用了修复程序。

<html>
<!DOCTYPE HTML>
<meta charset="UTF-8" name="viewport" content="width=device-width">
<head>
    <title>Calculator</title>
</head>
<body>
    <h2>Enter in the values you want to add</h2>
    <form>
        <input id="num1" name="num1" type="number"> //value one
        </br>
        <input id="num2" name="num2" type="number"> //value two
        <button type="button" id="calculate">Calculate</button> //Click to calculate
    </form>
    <p id="p">The answer will show here</p>
    <script>
        var p1=document.getElementById("p");
        var p=p1.innerHTML;
        var calc=document.getElementById("calculate");
        calc.addEventListener("click", answer); //When the button is clicked it calls the function answer()
        function answer() {
            var num1=document.getElementById("num1");
            var num2=document.getElementById("num2");
            var x=Number(num1.value);
            var y=Number(num2.value);
            p=x+y; //print the sum of the two values, inside of the p tag
            p1.innerHTML = p;
        }
    </script>
</body>

很抱歉，回答很冗长，但尝试自行解决每个错误，这是我能做到的最简单明了的解释。

简单的javascript加法，我哪里出错了？

4 个答案: