Update Text in input box using Javascript

Question

I have an input box which is written as shown below:

<input id="SlidingWindow" type="number" placeholder="50" class="span3">

This input box is part of a form and on clicking a submit button, I call a javascript function. I am trying to do a check if the number inputted is withing range. Incase it is not in range, I want to set the value in the box to a default value as shown below:

slidingWindow = document.getElementById("SlidingWindow").value;
    if (slidingWindow < 30) {
        slidingWindow = 30;     
    } else if (slidingWindow > 2000) {
        slidingWindow = 2000;       
    }
    document.getElementById("SlidingWindow").innerHTML = slidingWindow;

However on doing this, the text in the box does not change. Instead of innerHTML I tried value as well. That did not work either. What could be the possible solution?

Answer 1

The problem here is that you are using .innerHTML to change the value of an input which is incorrect, you have to use .value instead, and to fire this test wrap your code into a function and attach it to the onchange event of your input, like this:

document.getElementById("SlidingWindow").onchange = function() {
  slidingWindow = document.getElementById("SlidingWindow").value;
  if (slidingWindow < 30) {
    slidingWindow = 30;     
  } else if (slidingWindow > 2000) {
    slidingWindow = 2000;       
  }
  document.getElementById("SlidingWindow").value = slidingWindow;
}

<input id="SlidingWindow" type="number" placeholder="50" class="span3">

You can test the Working Fiddle here.