'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);
    }



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source