Estoy tratando de hacer un juego de cartas de memoria. Quiero agregar un botón de reproducir nuevamente pero no entiendo cómo hacerlo. No entendí cómo hacer que el atributo de visualización del botón cambie cuando el reproductor haya terminado. Estaba atascado porque ¿cómo accedo al atributo css de dicho botón sin hacer clic en el botón? Quiero que el botón sea invisible hasta que el jugador termine el juego y solo entonces aparezca. y una vez hecho clic, reiniciará el juego y desaparecerá. lo siento por el mal inglés.

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