输入数字在指定区间时自动更新字段的JS代码问题排查

核心问题及修复点 #

• 事件绑定语法错误：原JS代码中$("#Tier").on("input"), function () {多了一个逗号，正确写法应为$("#Tier").on("input", function () {。这个错误会直接导致事件处理函数无法绑定，输入时无任何响应，控制台也不会输出日志。
• HTML标签语法错误：<div class="form-group" id="div_id_Tier>的ID属性引号未闭合，需修正为<div class="form-group" id="div_id_Tier">，避免影响HTML结构正确性。
• 值类型处理隐患：输入框val()返回字符串，直接与数字比较存在隐式转换风险（如输入非数字内容会得到NaN，导致判断异常），建议显式转为数字类型（如parseInt()）并增加有效性判断。
• 依赖检查：确保页面已正确引入jQuery库，否则$会未定义，代码无法执行。

修正后的完整代码 #

HTML部分

<div class="form-group" id="div_id_Tier">
  <label class="requiredField" for="id_Tier">Tier<span style="color:red">*</span></label>
  <div>
    <input class="textinput textInput form-control" id="Tier" maxlength="100" name="Tier" placeholder="Tier*" required="" type="text" />
  </div>
</div>
<div>
  <input type="text" id="tiering" name="tiering">
</div>

JavaScript部分

<script>
$("#Tier").on("input", function () {
  const tierValue = parseInt($("#Tier").val(), 10);
  if (!isNaN(tierValue) && tierValue > 0 && tierValue < 20000) {
    console.log('Silver');
    $("#tiering").val("Silver");
  } else {
    // 可选：值不符合条件时清空结果字段
    $("#tiering").val("");
  }
});
</script>

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