JavaScript 获取然后更改类(带变量)

Question

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

我的问题是从两个 for 循环内部获取类。控制台告诉我:

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，用于获取循环内部的类，它将输出: "#btnJudge1_0" 然后 “#btnJudge1_1”。当我检查控制台时，它打印正确，但无法让它检查类，因为它是 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