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">

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">

I can't find any solution anywhere that correspond to the issue above.

So I have a number type input and declared a min and max attribute with the value 0 and 10 respectively.

The user can click the input field and change its value outside of range, hence I need to use javasricpt to check any changes made

• javascript
• html
• dom-events

• Why are you doing this: input = input.value; Due to this, next line will throw error – Rajesh Commented Oct 31, 2017 at 5:57

4 Answers 4

• You're overwritting your HTMLInputElement with the value which is string, hence you're getting error.
• Use onchange event along with document.addEventListener.
• I've DOMContentLoaded method which gives you better idea instead of using 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">

Multiple issues in your code

• You are setting input to the input.value so input bees a String which doesn't have addEventListener

• Use change event instead of checking.

• check method doesn't have visibility to input, so rely on event.target.

• Your if condition needs an OR || instead of &&

Demo

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

function check ( event ) 
{
  var input = Number(event.target.value);
  console.log(input);
  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">

function change(){
var num = document.getElementById("num").value;
if(num > 10 || num < 0){
alert("Number is not in range");
}
}

<input id="num" type="number" min="0" max="10" onchange="change()">

if you type number manually then you should left that input field to check or you can use other methods such as onkeypress etc.

• You are setting addeventlistener to the input value.

• You are trying to use input in check function but it is not available in that method as it is not defined in the scope of that function.

      window.onload = function init() {
         console.log("DOM is ready!");
         var value;
         var input = document.getElementById("yourGuess");
         value = input.value;
         input.addEventListener("change",check)
      }
      
      function check() {
          if(this.value < 0 || this.value > 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">