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

Why doesn't this simple HTML/JavaScript calculator work?

本文关键字：JavaScript 计算器 不起作用 HTML 简单 为什么      更新时间：2023-09-26

这是我的代码：

<!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]"

为什么这不起作用？

你得到的不是值，只是元素：

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

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

您可能希望从以下内容开始：

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

也许还可以添加一些错误检查，或者指定输入必须是数字等。

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

  2. parseInt ->你想要数字而不是字符串（如果你想要浮点数，则解析浮点）

    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;
}
相关文章：