JavaScript实现单位换算时输入值相乘报NaN错误如何修复

问题根源 #

• 页面初始化时就读取输入框的值，此时输入框为空，parseInt("")返回NaN，直接导致预计算的config.kilometers.miles初始值就是NaN
• config是页面加载完成后就生成的静态对象，用户后续输入的数值不会同步更新到提前计算好的属性值里
• 未做输入合法性校验，空值、非数字输入都会导致计算异常

修复方案 #

将config的静态预计算逻辑改为存储转换系数，点击计算按钮时再实时读取输入值进行计算，完整修复后的JS代码如下：

// 配置项仅存储单位转换系数，不提前计算结果
const config = {
 "kilometers": {
    "miles": 0.621371, // 原代码的1.609是英里转公里的系数，公里转英里正确系数为0.621371，如需保留原逻辑可改回1.609
    "yards": 1093.61,
    "feet": 3280.84,
    "inches": 39370.1
  },
  "meters": {
    "miles": 0.000621371,
    "yards": 1.09361,
    "feet": 3.28084,
    "inches": 39.3701
  },
  "centimeters": {
    "miles": 0.00000621371,
    "yards": 0.0109361,
    "feet": 0.0328084,
    "inches": 0.393701
  },
  "milimeters": {
    "miles": 0.000000621371,
    "yards": 0.00109361,
    "feet": 0.00328084,
    "inches": 0.0393701
  }
}

document.getElementById("btn").addEventListener("click", function(){
   // 点击计算时再读取最新的输入值
   const inputPlace = parseFloat(document.getElementById("inputPlace").value);
   // 输入合法性校验
   if (isNaN(inputPlace)) {
      document.getElementById("aaa1").innerHTML = "请输入合法的数值";
      return;
   }
   const metricValue = document.getElementById("metric").value;
   const impValue = document.getElementById("imperial").value;
   // 实时计算转换结果
   const calcResult = inputPlace * config[metricValue][impValue];
   document.getElementById("aaa1").innerHTML = calcResult.toFixed(2);
});

HTML代码不需要修改，可直接沿用原有代码。

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