Question

I have this set of code that adds a display:none css class to a certain element on my page. Though this works, I need the code to apply the style to the element upon the 15^th input value being shown. Right now it applies the style after the input has been created and the button is clicked again. I need it to disappear on the creation of that 15^th input field.

Any ideas?

 <script> 
>            var counter = 1; 
>            var limit = 15; 
>            function addInput(divName){
> >             if (counter == 15)  {       
>                 var el = document.getElementById('destroy');      
>                 el.style.display = "none";
> >               }
> >             else {
> >               var newdiv = document.createElement('div');
> >               newdiv.innerHTML = "<span id=''>Serial Number " + (counter + 1) + " : <input type='text' name='myInputs[]'/></span>";
> >               document.getElementById(divName).appendChild(newdiv);
> >               counter++;
> >             }
> > 
> > }  </script>

Answer 1

I’m guessing you are trying to do this:

var counter = 1; 
var limit = 15; 
function addInput(divName){
  if (counter < limit)  {       
    var newdiv = document.createElement('div');
    newdiv.innerHTML = "<span id=''>Serial Number " + (counter + 1) + " : <input type='text' name='myInputs[]'/></span>";
    document.getElementById(divName).appendChild(newdiv);
    counter++;
    if(counter === limit){
      var el = document.getElementById('destroy');      
      el.style.display = "none";
    }
  }
}