JavaScript only works once, then need to refresh page?

1 
<html>
<head>

<script> src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">/script>
<style>
body {
background-color: grey;
}

#selector{
position:relative;
height:150px;
width:150px;
background-color: black;
}
#boxOne{
position:relative;
height:150px;
width:150px;
background-color: white;
}
#boxTwo{
position:relative;
height:150px;
width:150px;
background-color: green;
}
#boxThree{
position:relative;
height:150px;
width:150px;
background-color: purple;
}

@keyframes mymove {
0%{left:0%;}
100%{left:50%;}
 }
</style>

<script>
function playOne(){
document.getElementById("boxOne").style.animation = "mymove 4s";
addEventListener("animationend", playTwo);
}
function playTwo(){
document.getElementById("boxTwo").style.animation = "mymove 4s";
addEventListener("animationend", playThird);
}
function playThird(){
document.getElementById("boxThree").style.animation = "mymove 4s";
addEventListener("animationend", playOne);
}
</script>

</head>

<body>
div id="selector" onclick="playOne()"></div>
div id="boxOne"></div>
div id="boxTwo"></div>
div id="boxThree"></div>
</body>

</html>
2

above is the code, the functions are fairly simple but im having trouble because the page only allows it to work once, i need to refresh in order for it to work again.

3

So sorry for the delay in getting back to you, German_Hoyos! Do you have a link where we can see this example live?

4

For whatever reason you have to reset the animation to nothing. It must reset something internally. Also, we have to remove the other event listener or all of the functions start being called. If you want to see, remove the ‘removeEventListener’ calls and look at the log. I lowered the animation times too, so testing would be faster.

I kind of got this formatted for you.

// Javascript Stuff

function playOne() {

	console.log('play one');
	document.getElementById("boxThree").style.animation = "";
	removeEventListener("animationend", playOne);
	document.getElementById("boxOne").style.animation = "mymove 0.25s";
	addEventListener("animationend", playTwo);

}

function playTwo() {

	console.log('play two');
	document.getElementById("boxOne").style.animation = "";
	removeEventListener("animationend", playTwo);
	document.getElementById("boxTwo").style.animation = "mymove 0.25s";
	addEventListener("animationend", playThird);
		
}

function playThird() {

	console.log('play three');
	document.getElementById("boxTwo").style.animation = "";
	removeEventListener("animationend", playThird);
	document.getElementById("boxThree").style.animation = "mymove 0.25s";
	addEventListener("animationend", playOne);
}

And it’s super weird being on the forums. I feel like the last time I posted something was ages ago.

1 Like
5

Mr Kirupa I was able to get it working but truthfully I do not fully understand (conceptually) why it works now. here is the link to the working code. CODEPEN

The question I have is in regards to the “colorShift()” function. I was told on stackoverflow that in order for a function to be used more than once without having to refresh the page I have to “clear” the animation before it runs again. So when i click the green block and it turns yellow it would only allow me to do that once unless i created another function

function resetAnimation(){
document.getElementById("boxOne").style.animation = "none";
};

that “resets” the animation of the function that actually calls the @keyframes from css. So finally i do not conceptually understand why the color shift would only occur once without using a reset function like this? It is simple code that I can duplicate but before I proceeded to create more complex animations I thought understanding this would be key.

On StackOverFlow someone described reseting the code with style.animation =“none” to me like “flipping a light switch” or a “glass of full water being emptied” - but i never told the switch to “stay flipped” or the glass of water to “stay full” in the first place, which is why i was a bit confused. STACKOVERFLOW QUESTION

6

very interesting, i never thought to “remove” the listner (nor even knew that was an option) before adding another evenListener to cycle back from the first from the third function. I appreciate this Mr Soup, i will start experimenting with this code now.