HTML中number类型input输入成绩实时触发JS校验弹窗问题求助

失效核心原因 #

• 你编写的jsdegree校验函数没有和输入框的输入事件绑定，没有触发执行的条件，所以逻辑不会自动运行
• 输入框的value属性默认返回字符串类型，直接和数字73做大小比较可能出现隐式类型转换的异常

修复代码 #

方案1：内联事件绑定（修改量最小） #

直接给input标签添加oninput事件属性，输入内容变化时立刻触发校验：

<input id="Degree" name="degree" type="number" oninput="jsdegree()">

优化JS逻辑，增加类型转换和非空校验，避免空输入误触发：

function jsdegree(){
  // 将输入值转换为数字类型，非合法数字会转为NaN
  var deg = Number(document.getElementById('Degree').value);
  // 先判断是有效数字再做大小比较
  if (!isNaN(deg) && deg < 73 ) {
    alert(" your degree is less than required ");
  }
}

方案2：事件监听绑定（无需修改HTML结构） #

如果不想写内联事件属性，可以直接在JS中绑定输入事件，HTML保持原来的写法即可：

// 页面DOM加载完成后绑定输入事件
document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('Degree').addEventListener('input', jsdegree);
})

function jsdegree(){
  var deg = Number(document.getElementById('Degree').value);
  if (!isNaN(deg) && deg < 73 ) {
    alert(" your degree is less than required ");
  }
}

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