CODEWITHSUNDEEP
javascriptclassgetelementbyid
paves
paves

Reputation: 27

JavaScript getting and then changing class (with variable)

I need to update buttons to show the last state that the group was in i.e. judge 1 scored a 0. I have four groups of 6 buttons. After all scores are entered I am committing the scores. I want to show what the last scores where.
enter image description here

My problem is grabbing the class from inside two for loops. The console is telling me:

Uncaught TypeError: Cannot read property 'className' of null at updateJudgeLast (scripts.js:278)

here is my function:

function updateJudgeLast(){
    for(j=1;j<5;j++){
        for(i=0;i<6;i++){
            var judgeScore ="#btnJudge";
            judgeScore += j;
            judgeScore += "_";
            judgeScore += i;
            console.info(judgeScore);

            var testLast = document.getElementById(judgeScore).className.split(' ')[1];
            console.info(testLast);

            switch(testLast){
            case "btn-default": break;
            case "btn-last":  $(judgeScore).attr("class", "btn btn-default"); break;
            case "btn-primary": $(judgeScore).attr("class", "btn btn-last"); break; 
            }
        }
    }
}

judgeScore is the id of the element to get the class of inside the loop it will output: "#btnJudge1_0" then "#btnJudge1_1". When I check the console it prints correctly but can't get it to check the class as it is null. What did I miss?

Background: This is a score board I'm making that is running FastLED on an ESP8266 12e the code is using JSON and JS to update the page and the board as needed.

Upvotes: 0

Views: 45

Answers (1)

ibrahim mahrir
ibrahim mahrir

Reputation: 31712

If you going to use document.getElementById then the ID shouldn't start with '#'. Try this:

var judgeScore ="btnJudge";  // remove #
    judgeScore += j;
    judgeScore += "_";
    judgeScore += i;
var testLast = document.getElementById(judgeScore).className.split(' ')[1];

Or use document.querySelector and keep the '#' like this:

var judgeScore ="#btnJudge";  // keep #
    judgeScore += j;
    judgeScore += "_";
    judgeScore += i;
    console.info(judgeScore);
var testLast = document.querySelector(judgeScore).className.split(' ')[1]; // and use querySelector

Upvotes: 2

Related Questions