Cannot read property 'className' of null(…)

Question

I have seen the questionon this topic and nothing is working. I am trying to add class to a button (total nine buttons) to "pushed-2" when clicked.

I am using 'for' loop for this but I am getting this eeror messgae:

Uncaught TypeError: Cannot read property 'className' of null(…)

but when I do console.log(document.querySelector(givenselector[i]).className);

it prints the classes correctly

Here's my HTML:

<div id="gameboard">
            <ul class="clearfix">
              <li><button class="gameboard-button unpushed" id="btn1">+</button></li>
              <li><button class="gameboard-button unpushed" id="btn2">+</button></li>
              <li><button class="gameboard-button unpushed" id="btn3">+</button></li>
              <li><button class="gameboard-button unpushed" id="btn4">+</button></li>
              <li><button class="gameboard-button unpushed" id="btn5">+</button></li>
              <li><button class="gameboard-button unpushed" id="btn6">+</button></li>
              <li><button class="gameboard-button unpushed" id="btn7">+</button></li>
              <li><button class="gameboard-button unpushed" id="btn8">+</button></li>
              <li><button class="gameboard-button unpushed" id="btn9">+</button></li>
            </ul>
          </div>

AndHere's my javaScript

document.addEventListener("DOMContentLoaded", function(event) {

  (function (global){

    var givenselector = new Array();

    for (i=0; i<9; i++){
      j=i+1;
      givenselector[i] = "#btn"+j;
      document.querySelector(givenselector[i]).addEventListener("click",function (event){
        var classes = document.querySelector('givenselector[i]').className;
        classes += " pushed-2";
        document.querySelector(givenselector[i]).className = classes;
        document.querySelector(givenselector[i]).innerText = "x";
    });
    }

  })(window);
});

`.addEventListener("click",function (event){` <-- a function — JJJ, Dec 10 '16 at 10:54

score 0 · Accepted Answer · answered Dec 10 '16 at 11:15

Don't use functions inside for loop and use starts with selector [id^='btn'] to select the elements you want.

var btns = document.querySelectorAll("[id^='btn']");
for(i=0; i<btns.length; i++){
 btns[i].className += " pushed-2";
  btns[i].innerHTML = "x";
};
console.log(btns);

<div id="gameboard">
            <ul class="clearfix">
              <li><button class="gameboard-button unpushed" id="btn1">+</button></li>
              <li><button class="gameboard-button unpushed" id="btn2">+</button></li>
              <li><button class="gameboard-button unpushed" id="btn3">+</button></li>
              <li><button class="gameboard-button unpushed" id="btn4">+</button></li>
              <li><button class="gameboard-button unpushed" id="btn5">+</button></li>
              <li><button class="gameboard-button unpushed" id="btn6">+</button></li>
              <li><button class="gameboard-button unpushed" id="btn7">+</button></li>
              <li><button class="gameboard-button unpushed" id="btn8">+</button></li>
              <li><button class="gameboard-button unpushed" id="btn9">+</button></li>
            </ul>
          </div>

Cannot read property 'className' of null(…)

1 Answers1