为什么我的 JavaScript 在运行代码时返回 NaN？

Question

我不久前开始学习编程，但我陷入了函数和间隔部分。

我想要的是一个非常简单的系统，使用 HTML 和 JavaScript 进行乘法运算，将输入数字作为参数传递。

但是，当我运行代码时，它返回 NaN 作为结果。

let button = document.querySelector("#button");
let num1 = parseInt(document.getElementById('num1').value);
let num2 = parseInt(document.getElementById('num2').value);

function operacao(a, b) {
  let resp = a * b;
  return resp;
}

let resto = operacao(num1, num2)
button.addEventListener("click", function() {
  document.getElementById('resto').innerHTML = 'O resultado é: ' + resto
});

<label>
  Informe os numeros:  
  <br>
  <input type="number" id="num1">
  <p>x</p>
  <input type="number" id="num2">
</label>
<br>
<br>
<button id="button" onclick=(operacao)>Multiplicar</button>
<p id="resto"></p>

Answer 1

您正在从输入中读取值，并在加载页面后立即对它们执行计算，然后用户才有机会输入任何值：

let num1 = parseInt(document.getElementById('num1').value);
let num2 = parseInt(document.getElementById('num2').value);
//...
let resto = operacao(num1, num2)

相反，从输入中读取值并在按钮单击处理程序中执行计算：

let button = document.querySelector("#button");

function operacao(a, b) {
  let resp = a * b;
  return resp;
}

button.addEventListener("click", function() {
  // Calculate the result here...
  let num1 = parseInt(document.getElementById('num1').value);
  let num2 = parseInt(document.getElementById('num2').value);
  let resto = operacao(num1, num2);
  document.getElementById('resto').innerHTML = 'O resultado é: ' + resto
});

<label>
  Informe os numeros:  
  <br>
  <input type="number" id="num1">
  <p>x</p>
  <input type="number" id="num2">
</label>
<br>
<br>
<button id="button" onclick=(operacao)>Multiplicar</button>
<p id="resto"></p>

Answer 2

单击按钮后您需要获取输入的值

let button = document.querySelector("#button");;

function operacao(a, b) {
  console.log(a, b)
  let resp = a * b;
  return resp;
}


button.addEventListener("click", function() {
  let num1 = parseInt(document.getElementById('num1').value);
  let num2 = parseInt(document.getElementById('num2').value)
  let resto = operacao(num1, num2)
  document.getElementById('resto').innerHTML = 'O resultado é: ' + resto
});

<label>
  Informe os numeros:  
  <br>
  <input type="number" id="num1">
  <p>x</p>
  <input type="number" id="num2">
</label>
<br>
<br>
<button id="button" onclick=(operacao)>Multiplicar</button>
<p id="resto"></p>