使用JavaScript按是否满18岁切换按钮禁用状态功能卡住如何解决

问题原因 #

• 第二个if分支中给disabled属性赋值的disabled是未定义变量，不是合法的布尔值false，代码执行到这里会抛出引用错误，导致按钮启用的逻辑无法生效
• 缺失了年龄刚好等于18的边界判断逻辑，输入18的时候两个if条件都不满足，按钮状态不会更新
• 从输入框拿到的Age值默认是字符串类型，未做类型转换直接做数值比较，可能出现隐式转换导致的判断异常

修正后的代码 #

// 先把输入值转成数字，非数字输入按非法情况处理
const Age = Number(document.getElementById('age').value)
// age verification
if (Age < 18 || isNaN(Age)) {
  document.getElementById('age').style.borderColor = '#e52213'
  document.getElementById("Btn").disabled = true
} else {
  // 满18岁的情况统一处理，不需要额外做大于18的判断
  document.getElementById('age').style.borderColor = '' // 恢复默认边框颜色
  document.getElementById("Btn").disabled = false
}

效果验证 #

修改后输入小于18的数值按钮自动禁用，输入大于等于18的合法数值按钮自动恢复启用，输入非数字内容也会默认禁用按钮，兼容异常输入场景。

内容的提问来源于stack exchange，提问作者Chris Van Gewden