classList.remove似乎崩溃了

Question

所以基本上我正在尝试进行过渡。 这是Chrome给我的错误消息：

  

未捕获的TypeError：无法读取未定义的属性“删除”

function showDefuseContainer(currentPhase){
    var DefuseContainer = document.getElementsByClassName("Defuser");
    if(currentPhase == "defuse" || currentPhase == "over"){
        DefuseContainer.classList.add("show");
    }else{
        DefuseContainer.classList.remove("show");
    }
}

Answer 1

document.getElementsByClassName（）-返回一个HTMLCollection-一个类似数组的对象。

使用一个ID：

document.getElementById("DefuserID")

或使用querySelector仅获得第一次出现：

document.querySelector("Defuser")

或按如下所示选择HTMLCollection中的第一个索引：

document.getElementsByClassName("Defuser")[0];

Answer 2

好的，所以我的建议是像这样使用DefuseContainer[0]

function showDefuseContainer(currentPhase){
    var DefuseContainer = document.getElementsByClassName("Defuser");
    if(currentPhase == "defuse" || currentPhase == "over"){
        DefuseContainer[0].classList.add("show");
    }else{
        DefuseContainer[0].classList.remove("show");
    }
}