JavaScript 获取然后更改 class（带变量）

Question

我需要更新按钮以显示该组所处的最后状态，即判断 1 得分为 0。我有四组 6 个按钮。输入所有分数后，我将提交分数。我想显示最后的分数在哪里。

我的问题是从两个 for 循环中获取 class。控制台告诉我：

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

这是我的函数：

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 是元素的 id 以获得循环内部的 class 它将输出："#btnJudge1_0" 然后 "#btnJudge1_1"。当我检查控制台时，它打印正确但无法让它检查 class，因为它是 null。我错过了什么？

背景：这是我正在制作的计分板，它是 ESP8266 12e 上的运行 FastLED，代码使用 JSON 和 JS 根据需要更新页面和板。

Answer 1

如果您要使用 document.getElementById，则 ID 不应以 '#' 开头。试试这个：

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

或者使用 document.querySelector 并保持 '#' 如下：

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

JavaScript 获取然后更改 class（带变量）

JavaScript getting and then changing class (with variable)

javascript

class

getelementbyid