Primera publicación aquí. Un principiante.

Lo que estoy tratando de hacer aquí es que:

Estoy tratando de mostrar una imagen de la silueta de una persona. Y con cada clic, la imagen actual se desvanece y aparece otra imagen de la misma persona (diferente posición/ubicación). Algo así como una animación, excepto que es muy básica.

Creé una variable que supuestamente controla cuándo ciertas imágenes aparecen o desaparecen gradualmente (var currentscene). El botón que llama a la función cubre toda la página y es invisible porque quiero que la animación se mueva cuadro por cuadro con un clic en cualquier lugar de la página.

('pararse' es una imagen de un niño de pie y 'sentarse' es una imagen de un niño sentado) editar: en el ejemplo se convierte en azul cuadrado y rojo cuadrado.

(Aparición y desaparición gradual son clases que agrego a la imagen para que se active la transición)

Y, sin embargo, el problema es que un solo clic se desvanecerá en ambas imágenes, como si el número en la variable (escena actual) no importara o el evento onclick registrara un número infinito de clics o algo así.

Estoy tratando de hacer que el cuadrado azul se desvanezca con el primer clic y el azul se desvanezca y el rojo se desvanezca con el segundo clic del botón.

Si hay una solución a esto, sería útil. Si hay otra manera de hacer lo que estoy tratando de lograr, soy todo oídos. Aunque he intentado buscar matrices y EventListeners pero no he tenido éxito.

Aquí hay una recreación del problema:

 var currentscene = 0; function next() { currentscene++; if (currentscene = 1) { var element = document.getElementById("blue"); element.classList.add("fade-in"); } if (currentscene = 2) { var element = document.getElementById("blue"); element.classList.add("fade-out"); var element = document.getElementById("red"); element.classList.add("fade-in"); } }

 .squareblue { height: 50px; width: 50px; top: 50px; background-color: blue; position: absolute; opacity: 0; animation-fill-mode: forwards; } .squarered { height: 50px; width: 50px; top: 100px; background-color: red; position: absolute; opacity: 0; animation-fill-mode: forwards; } .fade-out { animation: fadeOut ease 2s } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } .fade-in { animation: fadeIn ease 2s } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }

 <div2 id="blue" class="squareblue"></div2> <div2 id="red" class="squarered"></div2> <button class="button" onclick="next()">next</button>