JS数字验证函数失效求助：计算器总计百分比校验异常

几个关键问题 #

1. 触发事件无效：t1total是只读输入框，用户无法手动修改，绑定的onchange事件不会触发。需要在计算总计的myFun0函数执行完成后，直接调用校验函数valTotal。
2. 函数逻辑存在bug：
   • 输入框的value是字符串类型，直接和数字100比较会出现非预期结果，必须转换为数字后再判断。
   • 原代码仅判断了总计大于100%的情况，未覆盖小于100%的场景，不符合需求。
   • x是输入框的数值内容，不是DOM元素，执行x.style.color会报错，需要获取t1total元素本身来修改样式。
3. 样式未重置：当总计恢复为100%时，没有将文字颜色改回默认状态，会一直保持红色。

修正后的代码 #

JavaScript部分 #

function valTotal() {
  // 获取总计输入框的DOM元素
  const totalInput = document.getElementById('t1total');
  // 将输入值转为数字，空值或非数字处理为0
  const totalValue = Number(totalInput.value) || 0;
  const target = 100;

  if (totalValue !== target) {
    // 统一提示信息，覆盖大于/小于100%的情况
    alert("警告！比例总计不等于100%，请调整数值确保总计为100%后再继续。");
    totalInput.style.color = "#cf0911";
    return false;
  } else {
    // 恢复默认文字颜色
    totalInput.style.color = "";
    return true;
  }
}

function myFun0() {
  let water = document.getElementById('t1water').value;
  let ingr1 = document.getElementById('t1ingr1').value;
  let ingr2 = document.getElementById('t1ingr2').value;
  let ingr3 = document.getElementById('t1ingr3').value;
  let ingr4 = document.getElementById('t1ingr4').value;
  let ingr5 = document.getElementById('t1ingr5').value;
  let ingr6 = document.getElementById('t1ingr6').value;
  
  // 空值转0，避免非数字输入导致总计变为NaN
  let total = (Number(water) || 0) + (Number(ingr1) || 0) + (Number(ingr2) || 0) + 
              (Number(ingr3) || 0) + (Number(ingr4) || 0) + (Number(ingr5) || 0) + 
              (Number(ingr6) || 0);
  document.getElementById("t1total").value = total;
  
  // 计算完成后直接调用校验函数
  valTotal();
}

HTML部分（仅修改总计输入框） #

<!-- 移除onchange事件，改为在myFun0中自动调用校验 -->
<input class="txbox1" type="textbox" id="t1total" readonly>

额外优化点 #

• 处理了空输入或非数字输入的情况，防止总计出现NaN。
• 统一警告提示信息，覆盖所有总计不等于100%的场景。
• 当总计回到100%时自动恢复默认文字颜色，提升用户体验。

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