纯javascript检测数字输入值的变化

Question

window.onload = function init() {
  console.log("DOM is ready!");
  var input, value;
  
  input = document.getElementById("yourGuess");
  input = input.value;
  
  input.addEventListener("checking", check, false);
  
  check(value);
  
}

function check(value) {
  if(input < 0 && input > 10) {
    alert("The number must be between 0 - 10");
    value = 0;
  }
}

<label for="yourGuess">You choose: </label>
<input id="yourGuess" type="number" min="0" max="10">

我在任何地方都找不到与上述问题相对应的解决方案。

所以我有一个数字类型输入，并声明了一个 min 和 max 属性，其值分别为 0 和 10。

用户可以单击输入字段并将其值更改为超出范围，因此我需要使用 javasricpt 来检查所做的任何更改

Answer 1

• 您正在HTMLInputElement用字符串值覆盖您的值，因此您会收到错误。
• onchange将事件与 一起使用document.addEventListener。
• 我有一个DOMContentLoaded方法可以给你更好的想法而不是使用window.onload！

document.addEventListener('DOMContentLoaded',function() {
    document.querySelector("#yourGuess").onchange=check;
},false);

function check(event) {
   if(event.target.value > 10 || event.target.value < 0){
      alert("The number must be between 0 - 10");
      event.target.value = 0;
   } 
}

<label for="yourGuess">You choose: </label>
<input id="yourGuess" type="number" min="0" max="10">