在JavaScript中对输入字段值做数学运算时为何得到0或NaN？

问题1：输入值仅在页面初始化时读取一次 #

页面加载完成后，你立刻获取了输入框的值并赋值给myInput，此时输入框是空的，myInput实际是空字符串。后续用户输入数字后，这个变量不会自动更新，点击按钮时仍在使用初始的空值——空字符串与数字相乘会得到0，最终导致计算结果异常。

问题2：parseInt的使用时机错误 #

你当前是先将字符串形式的输入值与数字运算，再用parseInt转换结果。但空字符串或无效字符串参与运算会得到NaN或0，正确的做法是先把输入值转换成数字，再进行数学运算。

修复后的代码 #

JavaScript 部分

let btnMonth = document.getElementById("month");
let btnDay = document.getElementById("day");
let myResult = document.getElementById("my-div");

function ageInDays() {
  // 每次点击时读取最新输入值并转换为整数
  let inputValue = parseInt(document.getElementById("my-input").value);
  // 校验输入是否为有效数字
  if (!isNaN(inputValue)) {
    myResult.innerHTML = `你的年龄天数：${inputValue * 12 * 30}`;
  } else {
    myResult.innerHTML = "请输入有效的数字";
  }
}

function ageInMonths () {
  let inputValue = parseInt(document.getElementById("my-input").value);
  if (!isNaN(inputValue)) {
    myResult.innerHTML = `你的年龄月数：${inputValue * 12}`;
  } else {
    myResult.innerHTML = "请输入有效的数字";
  }
}

btnDay.addEventListener("click", ageInDays);
btnMonth.addEventListener("click", ageInMonths);

HTML 部分（无需修改）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Learn JavaScript</title>
    <link rel="stylesheet" href="mystyle.css">
    <style>
      
    </style>
  </head>
  <body>
    <div>
      <input type="text" id="my-input">
      <button id="day">Days</button>
      <button id="month">Months</button>
    </div>
    <div id="my-div"></div>
    <script src="mains.js"></script>
  </body>
</html>

关键修改说明 #

• 将获取输入值的逻辑移到点击事件函数内部，确保每次点击都能读取用户最新输入的内容。
• 先对输入值执行parseInt转换，再通过isNaN校验是否为有效数字，避免非数字输入导致的NaN问题。
• 直接使用转换后的数字进行运算，无需再对运算结果调用parseInt（整数相乘结果仍为整数）。

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