Javascript: как изменить класс и CSS, когда значение равно нулю

У меня есть 9 полей в моем html.

Существует значение с идентификатором под названием «lifepoint».

Существует функция щелчка мышью: щелкните один раз и уменьшите одно очко жизни. Этот код завершен.

function decrementlife() {
        var element = document.getElementById('lifepoint');
        var value = element.innerHTML;
    
        --value;
        console.log(value);
        document.getElementById('lifepoint').innerHTML = value;
        if(value <= 0) { alert("Game Over!")};
    }

Кроме того, существует стиль css, называемый «crackbox».

.crackbox {
    position: relative;
    background: linear-gradient(0deg, black, rgb(120, 120, 120));
    width: 12vh;
    height: 12vh;
    border-radius: 30%;
    margin: 5px;
}

Я хочу изменить весь класс коробки с «коробки» на «крэкбокс», если точка жизни равна нулю. Таким образом, любой стиль коробки может быть «crackbox».

Приведенный ниже код не работает...

$(document).ready(function () {
      $(".box").each(function() {
        document.getElementById('lifepoint').innerHTML = value;
        if(value <= 0) { 
          ".box".toggleClass('crackbox')
        };

      })
    });

3 метода стилизации элементов HTML
3 метода стилизации элементов HTML
Когда дело доходит до применения какого-либо стиля к нашему HTML, существует три подхода: встроенный, внутренний и внешний. Предпочтительным обычно...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Введение в технологический стек Twitch
Введение в технологический стек Twitch
В этой статье мы подробно рассмотрим стек Twitch, который подразделяется на следующий набор технологий:
8 полезных HTML-тегов, которые лучше использовать вместо <div>
8 полезных HTML-тегов, которые лучше использовать вместо <div>
Когда я только начинал изучать html, я использовал div для всего, это был один из первых тегов, которые я выучил, и казалось, что он работает в любой...
HTML5: API локального хранилища (Local Storage)
HTML5: API локального хранилища (Local Storage)
LocalStorage - это простой способ хранения данных в браузере пользователя.
Доступность HTML - программирование с инклюзивной перспективой
Доступность HTML - программирование с инклюзивной перспективой
Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что...
0
0
32
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Самый простой способ — использовать querySelectorAll и прокручивать элементы:

for(let i = 0, list = document.querySelectorAll(".box"); i < list.length; i++)
{
  list[i].classList.toggle('crackbox');
}

Или более короткая версия ES6:

[...document.querySelectorAll(".box")].forEach(el => el.classList.toggle('crackbox'))
Ответ принят как подходящий

Вместо того, чтобы использовать готовый документ, вызовите другую функцию из декремента жизни, если значение становится равным 0. Я пишу код для вашей помощи.

function decrementlife() {
    var element = document.getElementById('lifepoint');
    var value = element.innerHTML;

    --value;
    console.log(value);
    document.getElementById('lifepoint').innerHTML = value;
    if(value <= 0) { changeClass(); alert("Game Over!")};
}

function changeClass(){
   $('.box').addClass('crackbox').removeClass('box');
}

Надеюсь, поможет!!

Другие вопросы по теме