Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

187
Views
Adding a play again button HTML/JS/CSS

i'm trying to make a memory flip card game. I want to add a play again button but i dont understand how to do it. I didnt understand how to make the display atribute of the button change when the player is finished. I was stuck because how do i access the css atribute of said button without the clicking on the button. I want the button to be invisible until the player is finished with the game and only then for it to appear. and once clicked it will reset the game and disappear. sorry for bad english.


    
      <div class="card" data-card="5" onclick="cardClicked(this)">
        <img src="img/cards/5.png">
        <img class="back" src="img/cards/back.png">
      </div>
      <button onclick="toggle_visibility(this)">Play Again!</button>
    
      <script src="js/game.js"></script>
    </body>
    

javascript:


    var elPreviousCard = null;
    var flippedCouplesCount = 0;
    
    var TOTAL_COUPLES_COUNT = 3;
     var audioWin = new Audio('sound/win.mp3');
    var audioWrong = new Audio('sound/wrong.mp3');
    var audioRight = new Audio('sound/right.mp3');
    
    
    // This function is called whenever the user click a card
    function cardClicked(elCard) {
        
        // If the user clicked an already flipped card - do nothing and return from the function
        if (elCard.classList.contains('flipped')) {
            return;
        }
        
        // Flip it
        elCard.classList.add('flipped');
        
        // This is a first card, only keep it in the global variable
        if (elPreviousCard === null) {
            elPreviousCard = elCard;
        } else {
            // get the data-card attribute's value from both cards
            var card1 = elPreviousCard.getAttribute('data-card');
            var card2 = elCard.getAttribute('data-card');
            
            // No match, schedule to flip them back in 1 second
            if (card1 !== card2){
                setTimeout(function () {
                    elCard.classList.remove('flipped');
                    elPreviousCard.classList.remove('flipped');
                    elPreviousCard = null;
                    audioWrong.play();
                }, 500)
                
            } else {
                // Yes! a match!
                flippedCouplesCount++;
                elPreviousCard = null;
                audioRight.play();
                
                // All cards flipped!
                if (TOTAL_COUPLES_COUNT === flippedCouplesCount) {
                    audioWin.play();
                    
                }
                
            }
            
        }
        
        
    }
    
    function toggle_visibility (btn){
        console.log(btn.innerText);
    }

about 4 years ago · Santiago Trujillo
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!