JavaScript parseInt转换问题：onblur事件计算返回NaN求助

嘿，别担心，NaN（非数字）的问题在JavaScript新手身上太常见了，咱们一步步拆解问题根源，搞定它～

最可能的几个原因 #

你遇到NaN，大概率是这几个点没处理好：

• 直接获取了DOM元素，没取输入框的实际值
• 输入的字符串没转换成数字就直接计算
• 输入为空/非数字内容时，转换失败导致计算出错

针对你的markupNumCheck()函数的修正示例 #

先看你代码片段里的问题：比如var unitPrice = document.getElementById("inputCost");，这行拿到的是整个输入框DOM对象，不是里面的数值！得加上.value，还要转成数字才行。下面是修正后的完整函数：

function markupNumCheck() {
  // 1. 获取输入框值并转成数字，空值/非数字时默认设为0
  var unitPrice = parseFloat(document.getElementById("inputCost").value) || 0;
  var percentMarkup = parseFloat(document.getElementById("inputMarkup").value) || 0;
  
  // 2. 这里替换成你的实际计算逻辑（示例是成本加价计算）
  var calculatedResult = unitPrice * (1 + percentMarkup / 100);
  
  // 3. 填充到目标文本框，避免NaN显示，金额可以保留两位小数
  var targetInput = document.getElementById("inputSales"); // 替换成你的目标框ID
  targetInput.value = isNaN(calculatedResult) ? "" : calculatedResult.toFixed(2);
}

关键细节解释 #

• .value不能忘：document.getElementById()返回的是DOM元素，必须用.value才能拿到用户输入的内容
• 转数字+默认值：parseFloat()把输入的字符串转成浮点数，|| 0是兜底——如果输入为空、字母等非数字内容，就用0代替，避免转成NaN
• 检查计算结果：用isNaN()判断最终结果是否有效，无效就填空字符串，避免页面显示NaN
• 绑定事件要正确：确保HTML里的输入框是这么绑定的：

  <input id="inputCost" onblur="markupNumCheck()">
  <input id="inputMarkup" onblur="markupNumCheck()">
  

复用逻辑到其他函数 #

搞定这个函数后，另外两个函数比如unitToSales()可以直接套用同样的模板：

1. 替换对应的输入框/输出框ID
2. 调整中间的计算公式就行

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