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

debugcn 发表于 Dev

布伦特

我试图让它将用户输入的两个数字相加，并将其打印在 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>

阿尔瓦罗·卡斯特罗

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

在<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;。
"sum"，在 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>

对于冗长的答案，我很抱歉，但我试图自己解决每个错误，它的解释尽可能清晰简单。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。