How to make an image fade in and another fade out with one button click?

Question

I'm trying to fade in the blue square with the first click of the button. And then on the second click, the blue square fades out and the red one fades in.

As you can see when you test it, it doesn't work that way. I don't know where I am wrong and If anyone can show me how to fix it I'd appreciate it.

 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>

Answer 1

A few mistakes, and a few things to improve.

Inside your if conditionals, you were assigning the value of 1 and 2 to the variable currentscene instead of using the comparison operator == . I added the remainder operator to be able to continue the loop indefinitely.

Instead of grabbing the element from the dom each loop, I just defined the elements at the top, and continued to reference the save variable.

instead of using a css keyframes animation, I used the css transition property to add animation to the changing of opacity.

If you have any questions, please ask

 let currentscene = 0; const blue = document.getElementById("blue");; const red = document.getElementById("red");; function next() { currentscene++; if (currentscene % 2 == 0) { blue.classList.remove("opaque"); red.classList.add("opaque"); } else if (currentscene % 2 == 1) { red.classList.remove("opaque"); blue.classList.add("opaque"); } }

 .squareblue, .squarered { height: 50px; width: 50px; position: absolute; opacity: 0; animation-fill-mode: forwards; transition: 1s; }.squareblue { top: 50px; background-color: blue; }.squarered { top: 100px; background-color: red; }.opaque { opacity: 1; } button {user-select: none}

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