为什么这个简单的HTML / JavaScript计算器不起作用？

Question

这是我的代码：

 <!DOCTYPE html> <html> <header></header> <body> <label id="FirstNumber">First Number:</label> <input type="text" id="number1"> <br> <label id="SecondNumber">Second Number:</label> <input type="text" id="number2"> <br> <button id="add" onclick="add()">Add</button> <button id="multiply" onclick="multiply()">Multiply</button> <br> <label id="FinalNumberLabel">Answer:</label> <label id="Answer"></label> <script type="text/javascript"> function add() { var num1 = document.getElementById("number1"); var num2 = document.getElementById("number2"); var answer = num1 + num2; document.getElementById("Answer").innerHTML = answer; } function multiply() { var num1 = document.getElementById("number1"); var num2 = document.getElementById("number2"); var answer = num1 * num2; document.getElementById("Answer").innerHTML = answer; } </script> </body> </html>

“乘”按钮返回“ NaN”错误，而“添加”按钮始终返回“ [objectHTMLInputElement] [objectHTMLInputElement]”

为什么不起作用？

Answer 1

您没有得到值，只有元素：

var num1 = document.getElementById("number1");

在这种情况下， num1实际上不是数字，而是一个objectHTMLInputElement 。

您可能想从以下内容开始：

var num1 = parseFloat(document.getElementById("number1").value);

也许还添加一些错误检查，或指定输入需要为数字等。

Answer 2

.value->您不想要输入元素，您想要它包含的值

parseInt->您想要数字而不是字符串（或者如果要浮动则为parseFloat）

 function add() { var num1 = parseInt(document.getElementById("number1").value); var num2 = parseInt(document.getElementById("number2").value); var answer = num1 + num2; document.getElementById("Answer").innerHTML = answer; } function multiply() { var num1 = parseInt(document.getElementById("number1").value); var num2 = parseInt(document.getElementById("number2").value); var answer = num1 * num2; document.getElementById("Answer").innerHTML = answer; }

为什么这个简单的HTML / JavaScript计算器不起作用？

问题描述

2 个解决方案

解决方案1
2 2016-01-29 15:55:38

解决方案2
0 2016-01-29 15:57:44

为什么这个简单的HTML / JavaScript计算器不起作用？

问题描述

2 个解决方案

解决方案1 2 2016-01-29 15:55:38

解决方案2 0 2016-01-29 15:57:44

解决方案1
2 2016-01-29 15:55:38

解决方案2
0 2016-01-29 15:57:44