pure javascript detect change in number typed input value

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

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

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

Dhaval Marthak · Accepted Answer · 2017-10-31 06:15:54Z

5

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

answered Oct 31, 2017 at 6:15

Dhaval Marthak

17.4k6 gold badges48 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

gurvinder372 · Accepted Answer · 2017-10-31 06:02:02Z

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

Anil Shrestha · Accepted Answer · 2017-10-31 06:03:01Z

0

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.

edited Oct 31, 2017 at 6:03

answered Oct 31, 2017 at 5:55

Anil Shrestha

1,20011 silver badges16 bronze badges

Comments

Jawad Akram · Accepted Answer · 2017-10-31 06:11:45Z

0

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

edited Oct 31, 2017 at 6:11

answered Oct 31, 2017 at 6:06

Jawad Akram

295 bronze badges

Collectives™ on Stack Overflow

pure javascript detect change in number typed input value

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related