Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

189
Visualizações
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
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda