javascript - 如何将函数的参数作为数字而不是 "NaN"进行交互/输出？

Question

所以我收到了 javascript 入门类(class)的作业，但我们还没有那么远，所以到目前为止我对这个主题还没有很多知识，但我被困在这部分的任务。作业是制作一个简单的计算器，它能够使用四个基本函数(+、-、*、/)，用两个参数调用该函数并输出结果。这是 JavaScript 代码:

"use strict";
var x = document.getElementById('nummer1').value;
var y = document.getElementById('nummer2').value;

function add(p1, p2) {
return Number(p1) + Number(p2);
}

function subtract(p1, p2) {
return p1 - p2;
}

function multiply(p1, p2) {
return p1 * p2;
}

function divide(p1, p2) {
return p1 / p2;
}

现在是 HTML:

<input type="number" name="nr1" id="nummer1">
<input type="number" name="nr2" id="nummer2"><br><br>
<button type="button" onclick="document.getElementById('demo').innerHTML = add(x, y)">Add</button>
<button type="button" onclick="document.getElementById('demo').innerHTML = subtract(x, y)">Subtract</button>
<button type="button" onclick="document.getElementById('demo').innerHTML = multiply(x, y)">Multiply</button>
<button type="button" onclick="document.getElementById('demo').innerHTML = divide(x, y)">Divide</button>
<p>The answer is: <span id="demo"></span></p>

现在的问题是，每次我尝试使用其中一个按钮时，输出结果都是“NaN”。我似乎不明白为什么会这样。我已经这样做了，变量 x 和 y 是用户输入的值，并且我已指定它们是数字。我不会将它们除以零或类似的东西。那他们不应该正常计算吗？我哪里出错了？如果这有什么区别，我通常将 js 代码放在 head 部分。

Answer 1

Now the problem is that everytime I try to use one of the buttons, the output results in "NaN"

因为当您单击这些按钮时，不会获取 x 和 y 的最新值。

成功

function add() {
  var p1 = document.getElementById('nummer1').value;
  var p2 = document.getElementById('nummer2').value;
  return Number(p1) + Number(p2);
}

function subtract(p1, p2) {
  var p1 = document.getElementById('nummer1').value;
  var p2 = document.getElementById('nummer2').value;
  return p1 - p2;
}

function multiply(p1, p2) {
  var p1 = document.getElementById('nummer1').value;
  var p2 = document.getElementById('nummer2').value;
  return p1 * p2;
}

function divide(p1, p2) {
  var p1 = document.getElementById('nummer1').value;
  var p2 = document.getElementById('nummer2').value;
  return p1 / p2;
}

<input type="number" name="nr1" id="nummer1">
<input type="number" name="nr2" id="nummer2"><br><br>
<button type="button" onclick="document.getElementById('demo').innerHTML = add()">Add</button>
<button type="button" onclick="document.getElementById('demo').innerHTML = subtract()">Subtract</button>
<button type="button" onclick="document.getElementById('demo').innerHTML = multiply()">Multiply</button>
<button type="button" onclick="document.getElementById('demo').innerHTML = divide()">Divide</button>
<p>The answer is: <span id="demo"></span></p>

请注意

• x 和 y 不再从 onclick 处理程序传递