為什么這個簡單的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