Question 214332 in CSS Question posted in
Some basic documentation can be found here.

Css – hidden button will not appear under is specified conditions

I have a small game that when all hearts are lost, a reset button should appear. I CANNOT for the life of me figure out why it’s not showing up. I’ve reworded it 3 times wondering if it was how I was assigning it’s 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();

Please help me

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.

Tags:

2

Answers


  1. 0

    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!

    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search