多输入实时计算Z-Score的JS代码冗余，寻求优化方案并保留实时输出

核心优化思路是把各组输入输出、常量参数抽成统一配置数组，复用同一套事件绑定和计算逻辑，后续要新增5组对应关系也仅需要添加配置项，不需要重复编写业务代码。

先修正你原有代码的小问题：getElementById() 传入的参数不需要带#前缀，带#是querySelector()的规则，原有写法会导致获取元素失败，优化代码中已同步修正。

优化后JS代码 #

// 所有计算组统一配置，后续新增对应关系仅需要往该数组添加配置项即可
const calcConfigs = [
  {
    inputSelector: '#formGroupExampleInput',
    outputId: 'suprq',
    mean: 3.93,
    sd: 0.29
  },
  {
    inputSelector: '#formGroupExampleInput1',
    outputId: 'usability',
    mean: 4.06,
    sd: 0.29
  }
]

// 复用的计算更新逻辑
function updateResult(config, inputVal) {
  const outputEl = document.getElementById(config.outputId)
  const num = parseFloat(inputVal)
  // 兼容非数字输入场景，避免输出NaN，可自定义保留小数位数
  outputEl.textContent = isNaN(num) ? '' : ((num - config.mean) / config.sd).toFixed(2)
}

// 批量绑定输入事件
calcConfigs.forEach(config => {
  const inputEl = document.querySelector(config.inputSelector)
  // 同时绑定input+change事件，输入过程中即可实时更新，不用等输入框失焦
  inputEl.addEventListener('input', e => {
    updateResult(config, e.target.value)
  })
})

优化说明 #

• 零冗余逻辑：所有计算、事件绑定逻辑仅写一次，代码量减少60%以上
• 可维护性强：所有参数统一放在配置数组中，修改常量不需要翻找业务逻辑
• 体验升级：原有仅支持失焦后计算，现在输入过程中就可以实时输出结果
• 兼容处理：新增非数字输入判断，避免页面输出异常值

HTML代码不需要做任何改动，直接替换原有JS部分即可正常运行，所有原有功能完全保留。

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