Estaba tratando de crear una tarjeta con varias caras, pero no estoy del todo seguro de cómo hacer el cambio cada vez que hago clic en la tarjeta. Cuando estoy en la consola, puedo ver que se agregó la clase, pero la cara sigue siendo la misma. Quiero que sea fondo gris, Nombre: Jane, fondo gris, Nombre: John. Ese es el patrón que estoy tratando de crear. Tengo janeCard y johnCard al final ya que no estoy 100% seguro de cómo alternar entre ellos.

Aquí está el enlace a mi codepen si alguien quiere ver. https://codepen.io/heidibonilla/pen/abyRrBg

 <section class="card-area"> <div class="card"> <div class="inner-card jane" id="clicks"> <div class="front"></div> </div> </div>

 // Card will flip on click const flipCard = document.querySelector('.inner-card'); flipCard.addEventListener('click', function() { flipCard.classList.toggle('is-flipped'); }) // Set a var to count the clicks let clicks = document.getElementById('clicks'); let count = 0; clicks.onclick = function() { count += 1; console.log(count); if(count % 2 == 0) { // show front of card console.log('even'); } else { // switch between john or jane janeCard.classList.toggle('john'); console.log('odd'); console.log(janeCard) } } const janeCard = document.querySelector('.jane'); const johnCard = document.querySelector('.john'); janeCard.innerHTML = `<div class="front"> </div> <div class="back"> <div class="back-info"> <h2>Jane Doe</h2> <p><strong>Title:</strong> Web Developer</p> <p><strong>Email:</strong> example@example.com</p> <p><strong>Phone:</strong> (999) 999 - 9999</p> </div> </div>` johnCard.innerHTML = `<div class="back"> <div class="back-info"> <h2>John Doe</h2> <p><strong>Title:</strong> iOS Developer</p> <p><strong>Email:</strong> example@example.com</p> <p><strong>Phone:</strong> (999) 999 - 9999</p> </div> </div>`