如何使用原生JavaScript实时获取Input输入框的更新值并做范围校验

你现有代码的核心问题有两个：

• 初始化阶段就直接读取输入框的value赋值给变量，这个操作只会拿到页面刚加载时的空值，后续输入框内容更新不会同步到这两个变量里
• addEventListener的第三个参数是事件配置项，不能用来给回调函数传参，你这里的写法是无效的

实现逻辑 #

1. 先存储输入框的DOM节点引用，需要取值时再实时读取.value，同时转为数值类型
2. 用防抖逻辑实现「用户停止输入后触发校验」的效果，避免输入过程中频繁弹出提示
3. 给两个输入框绑定input事件，输入时触发防抖校验逻辑
4. 调整生成随机数的回调逻辑，每次点击时读取最新的输入值做判断后再生成

完整可运行代码 #

HTML代码和你现有代码完全一致，不需要修改，JS代码调整如下：

const numberGenerator = document.querySelector(".random-number");
const button = document.querySelector(".button1");
// 先存储DOM节点引用，不直接读取初始value
const minInput = document.querySelector("#min");
const maxInput = document.querySelector("#max");
// 防抖定时器标识
let validateTimer = null;

// 校验最小值最大值是否填反的函数
function validateRange() {
  const min = Number(minInput.value);
  const max = Number(maxInput.value);
  // 两个值都填写完成才触发校验
  if (!isNaN(min) && !isNaN(max) && min > max) {
    alert("提示：最小值不能大于最大值，请检查输入");
  }
}

// 给两个输入框绑定输入事件，停止输入300ms后触发校验
minInput.addEventListener('input', () => {
  clearTimeout(validateTimer);
  validateTimer = setTimeout(validateRange, 300);
});
maxInput.addEventListener('input', () => {
  clearTimeout(validateTimer);
  validateTimer = setTimeout(validateRange, 300);
});

// 生成随机数函数
function generateRandomNumber() {
  const min = Number(minInput.value);
  const max = Number(maxInput.value);
  // 点击生成时也做合法性校验
  if (isNaN(min) || isNaN(max)) {
    alert("请输入有效的数字");
    return;
  }
  if (min > max) {
    alert("提示：最小值不能大于最大值，请检查输入");
    return;
  }
  // 公式里+1是为了可以取到最大值本身，不需要可以删除
  const randomNumber = Math.floor(Math.random() * (max - min + 1)) + min;
  numberGenerator.innerHTML = randomNumber;
}

button.addEventListener("click", generateRandomNumber);

内容的提问来源于stack exchange，提问作者Ram Shankar Kumar