如何对多个id调用getElementById()？多input元素批量操作方法

你用document.querySelectorAll("#input1, #input2, #input3, #input4")获取到的是NodeList 节点集合（类数组结构，包含所有匹配到的输入框元素），不是单个DOM元素，直接在集合对象上访问.value、.min、.max属性会返回undefined，后续逻辑自然无法正常执行。
另外你当前用内联onchange绑定事件，触发事件时完全可以直接拿到当前操作的输入框对象，不需要每次触发都重新查询所有DOM元素。

方案1：保留内联事件绑定（改动最小） #

修改内联事件的传参，把当前触发事件的元素传入校验函数即可，你原本的多id选择器写法本身是合法的，只是使用方式不对。

<!-- 给onchange传入this，代表当前输入框元素 -->
<input id="input1" type="number" onchange="minmax(this)" min="0.01" max="94.99">
<input id="input2" type="number" onchange="minmax(this)" min="0.1" max="99.99">
<input id="input3" type="number" onchange="minmax(this)" min="5" max="25">
<input id="input4" type="number" onchange="minmax(this)" min="1" max="10">

function minmax(inp_field) {
  let val = parseFloat(inp_field.value),
      min = parseFloat(inp_field.min),
      max = parseFloat(inp_field.max);

  // 补充非数值输入兜底
  if (isNaN(val)) {
    inp_field.value = min;
    return;
  }
  if (val < min) {
    inp_field.value = min;
  } else if (val > max) {
    inp_field.value = max;
  } else {
    inp_field.value = val;
  }
}

注：数值输入场景建议把type="text"改为type="number"，会自动唤起数字输入键盘，也能减少非法输入。

方案2：批量绑定事件（推荐，分离HTML和JS逻辑） #

如果不想在HTML里写内联事件，可以用你原本的一行选择器拿到所有输入框，遍历给每个元素绑定事件即可：

<!-- 不需要写onchange属性 -->
<input id="input1" type="number" min="0.01" max="94.99">
<input id="input2" type="number" min="0.1" max="99.99">
<input id="input3" type="number" min="5" max="25">
<input id="input4" type="number" min="1" max="10">

// 等DOM加载完成后执行绑定
document.addEventListener('DOMContentLoaded', () => {
  // 一行代码获取所有目标输入框，选择器写法完全符合规范
  const inpFields = document.querySelectorAll("#input1, #input2, #input3, #input4");
  // 遍历节点集合，给每个输入框单独绑定校验逻辑
  inpFields.forEach(inp_field => {
    inp_field.addEventListener('change', () => {
      let val = parseFloat(inp_field.value),
          min = parseFloat(inp_field.min),
          max = parseFloat(inp_field.max);
      if (isNaN(val)) {
        inp_field.value = min;
        return;
      }
      // 用Math api简化范围判断逻辑
      inp_field.value = Math.min(Math.max(val, min), max);
    })
  })
})

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