CODEWITHSUNDEEP
javascripthtmldom-events
Afiq Rosli
Afiq Rosli

Reputation: 385

pure javascript detect change in number typed input value

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

Upvotes: 2

Views: 10145

Answers (4)

Dhaval Marthak
Dhaval Marthak

Reputation: 17366

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

Upvotes: 5

Jawad Akram
Jawad Akram

Reputation: 29

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

Upvotes: 0

Anil Shrestha
Anil Shrestha

Reputation: 1200

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.

Upvotes: 0

gurvinder372
gurvinder372

Reputation: 68433

Multiple issues in your code

  • You are setting input to the input.value so input becomes 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">

Upvotes: 1

Related Questions