无法访问元素的类以在 JavaScript 中更改其名称

Question

我想将元素的类从score -box1 更改为score -box1.-active 。 我创建了一个 const $target 来尝试访问类 score -box1 但它不起作用。

const $target = document.getElementByClassname('score -box1')
function PlayerScore(score = 0){
    if(score == 1){
        $target.toggle('-active');
    }else if(score == 2){
        $target.toggle('-active');
    }else if(score == 3){
        $target.toggle('-active');
    }

    return( /*html*/
    `
        <div class = "container">
            <div class = "score -box1">one</div>
            <div class = "score -box2">two</div>
            <div class = "score -box3">three</div>
        </div>
    `
    )
}

Answer 1

正确的方法是.querySelectorAll并且它返回一个节点列表，如果您在末尾添加一个[0]如下所示，您将获得该节点列表的第一个元素（这可能是您现在想要的），但是如果您想要所有目标元素都使用for loop遍历document.querySelectorAll('score -box1')数组。

const $target = document.querySelectorAll('score -box1')[0]
function PlayerScore(score = 0){
    if(score == 1){
        $target.toggle('-active');
    }else if(score == 2){
        $target.toggle('-active');
    }else if(score == 3){
        $target.toggle('-active');
    }

    return( /*html*/
    `
        <div class = "container">
            <div class = "score -box1">one</div>
            <div class = "score -box2">two</div>
            <div class = "score -box3">three</div>
        </div>
    `
    )
}

或者您可以将.querySelectorAll替换为.querySelector ，它会自动返回第一个元素： https ://www.w3schools.com/jsref/met_document_queryselector.asp