Скрытая кнопка не появляется при определенных условиях

У меня игра мелкая и при проигрыше всех сердечек должна появиться кнопка сброса. Я не могу понять, почему он не появляется. Я переписывал его 3 раза, задаваясь вопросом, не так ли я присваивал его значение, но ни один из них не сработал. Кнопка появляется, как только я удаляю операторы для ее сокрытия, но должны работать операторы проверки, чтобы она снова появлялась.

const resetButton = document.getElementById('reset');

function reset() {
  location.reload();
}

resetButton.addEventListener('click', reset);

// Hide reset button until no hearts left
function hideReset() {
  if (foodHeart1.src.match("images/emptyheart.png" && playHeart1.src.match("images/emptyheart.png"))) {
    resetButton.style.display = "visible";
  } else {
    resetButton.style.display = "none";
  }
}

hideReset();

Я пытался перемещать его, размещая в новых местах, но безуспешно. Я не уверен, как еще я могу написать это.

🤔 А знаете ли вы, что...
JavaScript активно развивается, и новые версии языка регулярно включают новые функции и улучшения.

[РЕШЕНО]Перейти к решению

Javascript273878 вопросов Css75481 вопрос Visibility246 вопросов

Ответы:

Что вызывает функцию hideReset()? если он не вызывается в основном цикле обновления или при столкновении попаданий, ничего не получится. Использование изображений для запроса о том, мертв ли игрок, — интересная идея, но было бы более эффективно просто использовать переменную.

//way up at the top
const resetButton = getElementById('reset');
resetButton.setAttribute('display', 'none');
//way up at the top


//in the player class   
processDamage(hitVal){
    this.HP -= hitVal;
    if (this.HP <= 0){
        resetButton.setAttribuute('display', 'block');
        //----other death state code---
    }
}

Я чувствую, что мне может понадобиться добавить еще немного кода, чтобы ответить полностью... Надеюсь, это будет полезно!

Решено

Вот некоторый код, который, как представляется, обеспечивает необходимую функциональность:

<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "UTF-8" />
        <meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
        <title>Hearts</title>
    </head>
    <body>
       <img id = "foodHeart1" src = "images/heartImage.png" alt = "emptyHeart" height = "50px">       
       <img id = "playHeart1" src = "images/heartImage.png" alt = "emptyHeart" height = "50px">       
       
       <button onclick = "changeImage()">Change to empty Heart</button>
       <button id = "reset">Reset</button>

    </body>
    <script src = "index.js" defer></script>

</html>

const resetButton = document.getElementById("reset");
const foodHeart1 = document.getElementById("foodHeart1");
const playHeart1 = document.getElementById("playHeart1");

function reset() {
    location.reload();
}

resetButton.addEventListener("click", reset);

// Hide reset button until no hearts left
function hideReset() {
    const foodHeartMatch = foodHeart1.src.match("images/emptyheart.png");
    const foodHeartEmpty = foodHeartMatch && foodHeartMatch.length === 1;
    const playHeartMatch = playHeart1.src.match("images/emptyheart.png");
    const playHeartEmpty = playHeartMatch && playHeartMatch.length === 1;

    console.info(`${foodHeartEmpty} : ${playHeartEmpty}`);

    if (foodHeartEmpty && playHeartEmpty) {
        resetButton.style.display = "inline";
    } else {
        resetButton.style.display = "none";
    }
}

hideReset();

// Change the images to empytyHear
function changeImage() {
    foodHeart1.src = "images/emptyheart.png";
    playHeart1.src = "images/emptyheart.png";

    hideReset();
}

Я не верю, что есть style.display = "visible", но я надеюсь, что кто-нибудь поправит меня, если это не так. (Из беглого взгляда на MDN. Здесь я установил его как встроенный, но вы можете использовать любое подходящее значение для отображения кнопки.

Я также использовал оператор длины в функции соответствия, поскольку он возвращает массив (для вашего условного оператора).

Как упомянул Джеймс в комментарии, функция hideReset(), скорее всего, будет вызываться там, где вы обновляете свои значения сердца. В этом случае я поместил его в функцию, которая меняет изображения.

Будет много способов улучшить это, но я надеюсь, что это поможет вам преодолеть первоначальный удар, с которым вы столкнулись.

Скрытая кнопка не появляется при определенных условиях

Ответы:

Интересные вопросы для изучения