简单的javascript加法，我哪里出错了？
[英]simple javascript addition, where am I going wrong?
问题描述
我正在尝试使其与用户输入的两个数字相加，并将其打印在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>
4 个解决方案
解决方案1
0
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（）将它们转换为数字。
解决方案2
0 2018-08-30 16:44:02
要解码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可以解决问题。
解决方案3
0 2018-08-30 16:45:43
有很多问题。 您无法复制ap的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>
解决方案4
0 已采纳 2018-08-30 16:53:26
您的代码中有几个错误，将尝试一一解决：
默认情况下，
<button>是type="submit"，当按下该<button>时会刷新整个页面，而不是预期的行为。 要修复它，只需要添加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检索它.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>
很抱歉，冗长的答案，但尝试自行解决每个错误，它的解释尽可能地简单明了。
HTML 文档中的 Javascript 函数，我哪里出错了？
[英]Javascript function inside HTML document, where am I going wrong?
我要改变颜色 <div> 在mouseOver函数上的javascript中。我在哪里出错？
[英]I'm to change color of <div> in javascript on mouseOver function.Where am i going wrong?
在文件输入上使用 JavaScript 压缩图像不起作用。 我哪里错了？
[英]Compressing images using JavaScript on File input is not working. Where am I going wrong?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.