Is it possible to trigger the animation function multiple times after the initial click without making changes to the HTML code? The ID and class in the code must remain as they are. I attempted to use the display property set to none, but it did not yield the desired result. I want the animation to commence when the <p> tag is clicked, but after the first click, the animation fails to restart. I wish to be able to call the function again, even in the midst of the animation. I have gone through other similar questions on this topic, but they were not applicable to me due to differences in HTML structure. Please refrain from using jQuery, but normal JavaScript is allowed. Thank you!
<!DOCTYPE html>
<html>
<head>
<style>
.something {
background:blue;
height:20px;
width:20px;}
.earth{
position :relative;
animation:move 10s linear;
background:red;
height:20px;
width:20px;
}
@-webkit-keyframes move
{
from { left: 0%; }
to { left: 100%; }
}
</style>
<script>
function changetext(){
document.getElementById("demo").style.color = "red";
animation();
}
function animation(){
document.getElementById('ghost').className ='earth';
}
function repeat(){
var sd = document.getElementById("ghost").className ='earth';
sd.style.display = 'none';
}
</script>
</head>
<body>
<div class="something"></div>
<div id="ghost"> </div>
<p onclick="changetext();" id="demo"> HELLO WORLD </p>
</body>
</html>