Show hidden buttons only when certain conditions are met
P粉545682500
P粉545682500 2024-01-10 17:29:34
0
2
344

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.

P粉545682500
P粉545682500

reply all(2)
P粉447495069

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 

I feel like I may need to add a bit more code to fully answer...I hope this helps!

P粉558478150

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


    
        
        
        Hearts
    
    
       emptyHeart       
       emptyHeart       
       
       
       

    
    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

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!