Блог

Главная - Вопросы по программированию - classList.remove, похоже, сбой

classList.remove, похоже, сбой

#javascript #css

#javascript #css

Вопрос:

Итак, в основном я пытаюсь сделать переход. Вот сообщение об ошибке, которое выдает мне Chrome:

Ошибка неперехваченного типа: не удается прочитать свойство ‘remove’ неопределенного

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

Комментарии:

1. DefuseContainer это список элементов (обратите внимание на множественный getElement s по имени класса). classList является свойством одного элемента.

2. используйте это вместо этого: var DefuseContainer = document.querySelector(".Defuser"); . В настоящее время вы получаете список элементов

3. @Tylerproper DefuseContainer будет списком, потому что document.getElementsByClassName("Defuser");

4. @DupinderSingh Извините, я не понимаю. Я полагаю, что это более или менее именно то, что я сказал, нет?

5. да, точно, я говорил вам «да», что вы правы, это DefuseContainer массив элементов

Ответ №1:

document.getElementsByClassName() — возвращает HTMLCollection — объект, подобный массиву.

Либо используйте идентификатор :

 document.getElementById("DefuserID")

Или querySelector для получения только первого вхождения:

 document.querySelector("Defuser")

Или выберите первый в HTMLCollection по его индексу следующим образом:

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

Ответ №2:

хорошо, итак, мое предложение — использовать DefuseContainer[0] как

 // function receiving currentPhase
function showDefuseContainer(currentPhase){
    var DefuseContainer = document.getElementsByClassName("Defuser");
    if(currentPhase == "defuse" || currentPhase == "over"){
        DefuseContainer[0].classList.add("show"); // if currentPhase  is defuse || over then add show class means show the Container
    }else{
        DefuseContainer[0].classList.remove("show"); // else remove the show class and hide the container
    }
}