unhiding a number of Divs based on user input

With the following markup, i need a way of revealing the number of Divs, based on what the user inputs into a form input, so if the user enters 5 then divs 1,2,3,4 & 5 are visable but the others are hidden, if they enter 3 the开发者_开发百科n only 1,2 & 3 are visable...

Form Input:

<input id="sitesinput" maxlength="3" />

Div markup:

<div id="inputsite" onChange='site_change()'>
<div id="site1" class="tenth">Site 1<br /><input name="site1" type="text" size="3" value="0" /></div>
<div id="site2" class="tenth">Site 2<br /><input name="site2" type="text" size="3" value="0" /></div>
<div id="site3" class="tenth">Site 3<br /><input name="site3" type="text" size="3" value="0" /></div>
<div id="site4" class="tenth">Site 4<br /><input name="site4" type="text" size="3" value="0" /></div>
<div id="site5" class="tenth">Site 5<br /><input name="site5" type="text" size="3" value="0" /></div>
<div id="site6" class="tenth">Site 6<br /><input name="site6" type="text" size="3" value="0" /></div>
<div id="site7" class="tenth">Site 7<br /><input name="site7" type="text" size="3" value="0" /></div>
<div id="site8" class="tenth">Site 8<br /><input name="site8" type="text" size="3" value="0" /></div>
<div id="site9" class="tenth">Site 9<br /><input name="site9" type="text" size="3" value="0" /></div>
<div id="site10" class="tenth">Site 10<br /><input name="site10" type="text" size="3" value="0" /></div>
</div>

Please note that the site_change function has nothing to do with what I require here.

Thanks for looking.

B.

(function() {

    var divs = document.getElementById('inputsite').childNodes,
        visible = parseInt(document.getElementById('sitesinput').value, 10);

    if (isNaN(visible)) {
        return;
    }

    for (var i = 0, divsLength = divs.length; i < divsLength; i++) {
        divs[i].style.display = (i < visible) ? 'block' : 'none'; 
    }

})();

This will loop through all children of #inputsite and set their display property to either block or none, dependent on the number entered into #sitesinput.

Also, a div does not have a onChange property, or even onchange that can be triggered.

Go about this way:-

function countAndRun(){
var req = parseInt(document.getElementById("sitesinput").value);
for(i=1;i<=req;i++){document.getElementById("site"+i).style.display="";}
for(i=req+1;i<=10;i++){document.getElementById("site"+i).style.display="none";}
}
window.setInterval("countAndRun()", 1000); // 1 second interval to prevent overload

Hope this helps

$("#sitesinput").live("change", function () {

   var num = parseInt($("#sitesinput").val());
   for (i = 1; i <= num ; i++)
   { 
      $("#site" + i).hide();

   }


});