JS调用parseInt()处理输入参数返回NaN，出风口百分比计算功能异常

错误原因梳理 #

• 事件触发未传参：输入框的onblur触发outletIndex()时没有传入实际值和设计值参数，函数接收到的actual、design都是undefined，运算后自然返回NaN
• 初始值读取时机错误：全局定义的x、y是页面加载时立即读取的，此时输入框还没有用户输入内容，读取到的值本身就是NaN
• 冗余类型转换：valueAsNumber已经返回数字类型，不需要再套parseInt处理，空输入时valueAsNumber本身就会返回NaN
• 数组存储逻辑错误：indexArray定义在函数内部，每次调用函数都会重新初始化，无法累计存储20个出风口的计算结果
• 结果展示容器冲突：所有出风口共用同一个id="percentage"的容器，计算结果会互相覆盖
• HTML结构不规范：<tr>标签下直接嵌套<div>不符合HTML规范，可能导致DOM节点读取异常

修复后可直接使用的代码 #

HTML代码 #

<table>
  <tr>
    <td>
      <div class="form-group row 1" id="outlets1">
        <label>Outlet Design</label>
        <input
          name="outlet 1 design"
          class="form-control design_1"
          id="outlet_design_1"
          type="number"
          placeholder="Outlet 1 Design"
        />
      </div>
    </td>
    <td>
      <div>
        <label>Outlet Actual</label>
        <input
          name="outlet 1 actual"
          class="form-control actual_1"
          id="outlet_actual_1"
          type="number"
          placeholder="Outlet 1 Actual"
          onblur="outletIndex(1);"
        />
      </div>
    </td>
    <td>
      <div>
        <label>Outlet Balance</label>
        <input
          name="outlet_balance"
          class="form-control"
          value=""
          id="outlet_balance_1"
          type="text" 
          placeholder="Outlet 1 Balance"        
        />
      </div>
    </td>
    <td>
      <div class="proportion" id="percentage_1"></div>
    </td>
  </tr>
  <!-- 新增2-20号出风口只需要复制上面的tr结构，把所有编号1对应改成2-20即可 -->
</table>

JS代码 #

// 全局存储所有出风口的计算结果，不会被函数调用重置
const allOutletIndex = [];

function outletIndex(outletNo) {
  // 动态读取对应编号的输入值
  const actual = document.getElementById(`outlet_actual_${outletNo}`).valueAsNumber;
  const design = document.getElementById(`outlet_design_${outletNo}`).valueAsNumber;
  // 提前做合法性校验，避免出现NaN
  if (isNaN(actual) || isNaN(design) || design === 0) {
    document.getElementById(`percentage_${outletNo}`).textContent = '输入无效';
    return;
  }
  const result = (actual / design * 100).toFixed(1);
  // 按编号存储结果，方便后续查找
  allOutletIndex[outletNo - 1] = Number(result);
  console.log('当前所有出风口结果：', allOutletIndex);
  // 写入对应编号的结果容器
  document.getElementById(`percentage_${outletNo}`).textContent = `${result}%`;
  // 可选：同步写入余额输入框
  document.getElementById(`outlet_balance_${outletNo}`).value = result;
}

20个出风口批量适配方案 #

不用手动给每个输入框加onblur属性，删除所有input的onblur属性后添加以下JS代码即可自动绑定所有出风口的计算事件：

// 页面加载完成后批量绑定20个出风口的失焦事件
window.addEventListener('load', () => {
  for (let i = 1; i <= 20; i++) {
    // 实际值修改后触发计算
    document.getElementById(`outlet_actual_${i}`).addEventListener('blur', () => {
      outletIndex(i);
    });
    // 可选：设计值修改后也重新计算
    document.getElementById(`outlet_design_${i}`).addEventListener('blur', () => {
      outletIndex(i);
    });
  }
});

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