为何我的JavaScript乘法功能运行时返回NaN？

你的代码出现NaN的核心问题有这几个：

• 页面刚加载就去拿输入框的值，这时候输入框是空的，parseInt("")会返回NaN，后续计算自然全是NaN
• 点击按钮时没有重新读取用户刚输入的数值，而是用了页面加载时的旧值
• 按钮上的onclick=(operacao)完全没用，属于多余代码

修正后的代码如下：

JavaScript 代码 #

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

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

button.addEventListener("click", function() {
  // 点击时才读取最新的输入值
  let num1 = parseInt(document.getElementById('num1').value, 10);
  let num2 = parseInt(document.getElementById('num2').value, 10);
  // 增加输入校验，避免空输入的情况
  if (isNaN(num1) || isNaN(num2)) {
    document.getElementById('resto').innerHTML = '请输入有效的数字';
    return;
  }
  let resto = operacao(num1, num2);
  document.getElementById('resto').innerHTML = 'O resultado é: ' + resto;
});

HTML 代码 #

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

关键改动说明 #

1. 延迟读取输入值：把获取输入框值的代码移到点击事件里，确保每次点击按钮都能拿到用户最新输入的内容
2. 添加基数参数：给parseInt加上第二个参数10，明确按十进制解析数字，避免出现八进制等意外情况
3. 增加输入校验：判断输入是否为有效数字，给用户更友好的提示
4. 移除冗余代码：删掉按钮上无效的onclick属性，避免冲突

内容的提问来源于stack exchange，提问作者Israel Oliveira