我无法使用javascript做一个简单的计算器

Question

我想制作一个简单的计算器，将两个数字相加

var num1 = Number(document.getElementById("n1").value);
var num2 = Number(document.getElementById("n2").value);

function sum() {
  var result = num1 + num2;
  console.log(result);
}

<input type="text" id="n1">
<input type="text" id="n2">
<button id="btn" onclick="sum();">Submit</button>
<script src="javascript.js"></script>

当我运行它并添加两个值并按下按钮时，它将在控制台中返回0

Answer 1

在您的代码中，检索值之前，它们由用户更改。

var num1 = document.getElementById("n1");
var num2 = document.getElementById("n2");

function sum() {
  var result = Number(num1.value) + Number(num2.value);
  console.log(result);
}

<input type="text" id="n1">
<input type="text" id="n2">
<button id="btn" onclick="sum();">Submit</button>
<script src="javascript.js"></script>

Answer 2

您实际上是在存储输入的第一个值，默认为0。

将变量更改为对元素的引用。然后，当用户按下按钮时访问这些值。

var num1 = document.getElementById("n1");
var num2 = document.getElementById("n2");

function sum() {
  var result = parseInt(num1.value) + parseInt(num2.value);
  console.log(result);
}

<input type="text" id="n1">
<input type="text" id="n2">
<button id="btn" onclick="sum();">Submit</button>
<script src="javascript.js"></script>

Answer 3

您必须将num1和num2变量放入sum函数，因为您的脚本每次要计算总和时都应读取num1和num2值。

 function sum() {
      var num1 = Number(document.getElementById("n1").value);
      var num2 = Number(document.getElementById("n2").value);
      var result = num1 + num2;
      console.log(result);
    }