How to add classes sequentially to elements without jQuery

Question

I did a bit of searching but could only find jQuery examples.

I've got a user input to take a number, the number will correlate to how many elements are shown. I'm trying to run a function that will add the shown class to the correct amount of elements.

The template section is showing but the classes aren't being added to the articles. I'm not getting any errors in Firebug. What am I doing wrong?

If there's a better way to achieve this please let me know.

No jQuery please.

I'm just looking to add a class sequentially to each article element depending on the value of the bannerCount input.

 var numBanners = document.getElementById('bannerCount').value; var template = 1; var template1 = document.getElementById('template1'); var template2 = document.getElementById('template2'); function genTemplate() { if (template == 1) { template2.className = "hide"; template1.className = "show"; for (var i = 0; i < numBanners; i++) { var q = document.querySelector('#template1:nth-child(i)'); q.className = "show"; } } else if (template == 2) { template1.className = "hide"; template2.className = "show"; for (var i = 0; i < numBanners; i++) { var q = document.querySelector('#template2:nth-child(i)'); q.className = "show"; } } } 

 <input type="number" id="bannerCount" value="1" min="1" max="10" name="bannerCount"> <input type="button" name="genTemplate" id="genTemplate" onClick="genTemplate();" value="Generate templates"> <section id="template1" class="hide"> <article id="t11" class="t1"></article> <article id="t12" class="t1"></article> <article id="t13" class="t1"></article> <article id="t14" class="t1"></article> </section> <section id="template2" class="hide"> <article id="t21" class="t2"></article> <article id="t22" class="t2"></article> <article id="t23" class="t2"></article> <article id="t24" class="t2"></article> </section> 

Answer 1

'#template1:nth-child(i)'

I think you wanted

'#template1 > *:nth-child('+i+')'

Although, like the commenters say, that code is pretty silly and you should probably just loop through template1.children

for(var i=0; i<numBanners; i++) {
  template1.children[i].className = "show"
}

Answer 2

Like this:

var pre = onload;
function onload = function(){
if(pre)pre();
var doc = document, bod = doc.body;
function T(e, t){
  return e.getElementsByTagName(t);
}
function E(e){
  return doc.getElementById(e);
}
function inArray(v, a){
  for(var i=0,l=a.length; i<l; i++){
    if(a[i] === v){
      return true;
    }
  }
  return false;
}
function removeClass(c, e){
  var x = c.split(/\s/), s = e.className.split(/\s/), r = [];
  for(var i=0,l=s.length; i<l; i++){
     if(!inArray(s[i], x))r.push(s[i]);
  }
  e.className = r.join(' ');
}
function addClass(c, e){
  var s = e.className.split(/\s/);
  if(!inArray(c, s)){
    s.push(c); e.className = s.join(' ');
  }
}
function showArticles(secId, num){
  var aa = T(E(secId), 'article');
  for(var i=0,l=aa.length; i<l; i++){
    var a = aa[i];
    removeClass('show', a); addClass('hide', a);
  }
  for(var i=0; i<num; i++){
    var a = aa[i];
    removeClass('hide', a) addClass('show' a);
  }
}
showArticles('template1', 2);
}