var container = document.getElementById('box-container');
var button = document.getElementById('button');

for (var i = 0; i < 3000; i++) {
  var div = document.createElement('div');
  div.classList.add('box');
  div.index = i;
  container.appendChild(div);
}

button.addEventListener('click', function() {

  var box1 = container.getElementsByClassName('box');
  for (var i = 1;i < box1.length; i+=2){
      box1[i].classList.toggle('gray');
  };

  var box2 = container.querySelectorAll('.box');
  for (var i = 1;i < box2.length; i+=2){
      box2[i-1].classList.toggle('gray');
  };

});

var container = document.getElementById('box-container');
var button = document.getElementById('button');

for (var i = 0; i < 6000; i++) { // added 3000 more to challenge modern browsers...
    var div = document.createElement('div');
    div.classList.add('box');
    div.index = i;
    container.appendChild(div);
}

button.addEventListener('click', function () {

    var box1 = container.getElementsByClassName('box');
    for (var i = 1; i < box1.length; i += 2) {
        box1[i].classList.toggle('gray');
    }

    var deadBox1 = [];
    for (i = 0; i < box1.length; i++) {
        deadBox1[i] = box1[i];
    }

    for (var i = 1; i < deadBox1.length; i += 2) {
        deadBox1[i].classList.toggle('gray');
    }

    var box2 = container.querySelectorAll('.box');
    for (i = 1; i < box2.length; i += 2) {
        box2[i - 1].classList.toggle('gray');
    }

});