1

I have a small game and when all hearts are lost, a reset button should appear. I can't for the life of me figure out why it's not showing up. I rewrote it 3 times, wondering if it was how I was assigning its value but none of them worked. The button appears as soon as I remove the statements for hiding it but there should be validation statements working in place to make it appear again.

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();

I have tried moving it around, placing it in new areas but haven't had much luck. I'm not sure how else I can write this.

Improve this question
5
  • 1
    When you step through the executing code with the browser's script debugger, what specifically happens? Is hideReset() being invoked? When it's invoked, what is the result of the if condition(s)? Does it match the expected result? If not, what was the expected result and why? Can you update this to a runnable minimal reproducible example which demonstrates the problem?
    – David
    Commented Jul 23, 2023 at 17:39
  • Somewhere you have a function that changes the number of hearts. I guess you need to call hideReset() from within that function too.
    – James
    Commented Jul 23, 2023 at 17:44
  • 1
    There is no visible value for the display property.
    – connexo
    Commented Jul 23, 2023 at 18:13
  • @MfyDev display doesn't have 2 values. inline, inline-block, flex, inline-flex, table these are also values of display property and there are more.
    – Md. Rakibul Islam
    Commented Jul 24, 2023 at 7:52
  • You should use visibility property. It has 2 values: visible and hidden.
    – MfyDev
    Commented Jul 24, 2023 at 16:47

2 Answers 2

Reset to default
-1

Here is some code that appears to get your required functionality:

<!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.log(`${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();
}

I don't believe there is a style.display = "visible", but I hope someone will correct me if that is wrong. (From a quick look at MDN. I have set it to inline here but you can use any appropriate value to display the button.

I also used the length operator on the match function as it returns an array (for your conditional statemnt).

As James mentioned in the comment the hideReset() function is likely going to be called where you update your heart values. In this case I have put it in the function that changes the images.

There will be many ways to improve this but I hope it gets you over the initial bump you're facing

Improve this answer
-1

What calls the function hideReset()? if it isn't called in the primary update loop, or in the hit collision, nothing will get it there. Using the images to query whether or not the player is dead is an interesting idea, but it would be more performant to just use a variable.

//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---
    }
}

I feel like I might need to add some more code to answer completely... I hope this is helpful!

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.