Show hidden buttons only when certain conditions are met

Question

I have a small game where when all hearts are lost, a reset button should appear. I can't for the life of me figure out why it didn't show up. I rewrote it 3 times wondering if this was how I assigned its value, but none of them worked. When I remove the statement that hides the button, the button appears, but there should be validation statements 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've tried moving it and placing it in a new area, but no luck. I don’t know how else to write this.

Answer 1

What call function hideReset()? If it's not called in the main update loop or on a hit collision, nothing will get there. Using an image to query if a player died is an interesting idea, but it would be more efficient to just use variables.

//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 may need to add a bit more code to fully answer...I hope this helps!

Answer 2

Here is some code that seems to do what you need:

    
        
        
        
    
    
              
              
       
       Change to empty Heart
       Reset

    
    sssccc

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 style.display = "visible", but I hope someone can correct me if this is wrong. (Quick look at MDN. I've set it up inline here, but you can use any appropriate value to display the button.

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

As James mentioned in the comments, the hideReset() function will most likely be called when you update the heart value. In this case I put it into a function that changes the image.

There are many ways to improve this, but I hope it gets you over the initial difficulties you face