JavaScript初学者使用try-catch-finally时输入任意值输出无变化问题求助

核心错误点 #

• DOM元素value属性拼写错误：JavaScript中属性名区分大小写，获取/设置输入框值需要使用小写的.value，你代码中写的.Value首字母大写，导致永远无法正确读取输入值，后续赋值逻辑也不会生效。
• 校验通过场景无处理逻辑：当输入值符合5-10的要求时，不会触发catch分支，结果展示区域不会输出任何内容。
• 输入框类型匹配错误：你的输入框设置了type="number"，finally中给它赋值非数字字符串"it is used !"属于非法赋值，不会生效。

修复后代码 #

JS代码 #

function checker(){
      var message, x;
      message = document.getElementById('resault');
      // 修正value拼写为小写
      x = document.getElementById('v').value;

      try {
            if (x == "") throw "为空";
            if (isNaN(x)) throw "不是数字";
            x = Number(x);
            if (x < 5) throw "太小";
            if (x > 10) throw "太大";
            // 新增校验通过的提示
            message.innerHTML = "输入合法，值为：" + x;
      }
      catch(err) {
            message.innerHTML= "输入" + err ;   
      }
      finally {
            // 这里改为清空输入框，若要保留文字提示可将输入框type改为text
            document.getElementById('v').value = "";
      }
}

可选HTML修改（如果需要在finally中展示文字提示） #

将输入框类型从number改为text即可：

<input type="text" id="v" placeholder="input here!">

内容的提问来源于stack exchange，提问作者M.alizadeh