使用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 .

Answer 2

Replace innerHTML by value

 function foo() { 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" onchange="foo()"> 

Answer 3

You have do one change only

 document.getElementById("SlidingWindow").innerHTML = slidingWindow;

replace this line by

document.getElementById("SlidingWindow").value= slidingWindow;

Other way is you can do this calling a function onchange

<input id="SlidingWindow" type="number" placeholder="50" class="span3" onchange="myFunction()">

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