Javascript, CSS, button doesn't call the function for an animation after first click [duplicate]

Question

Is there a way to call the function animation multiple times after first click without changing the HTML code? I need to keep id and class as they are in the code. I was trying to use display property to none, but it doesn't seem to work. I want the animation to start when the <p> tag is clicked, but once I clicked it the first time, the animation doesn't start again. I'd like to call the function again even in the middle of the animation. I read all the other questions regarding this topic, but they don't seem to work for me, because the HTML was different. Please don't use Jquery, but you can use normal JS. 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>

void · Accepted Answer · 2018-03-03 10:39:47Z

0

You can remove the class and re-add it with a slight unnoticeable delay of 1ms.

function changetext() {
  document.getElementById("demo").style.color = "red";
  animation();
}

function animation() {
  document.getElementById('ghost').className = '';
  setTimeout(function(){
    document.getElementById('ghost').className = 'earth';
  }, 1);
}

.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%;
  }

<div class="something"></div>
<div id="ghost"> </div>

<p onclick="changetext();" id="demo"> HELLO WORLD </p>

edited Mar 3, 2018 at 10:39

answered Mar 3, 2018 at 10:34

void

36.7k10 gold badges71 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Temani Afif Over a year ago

even with 0 instead of 1 it will work ;)

void Over a year ago

But 1 looks better there @TemaniAfif

Temani Afif Over a year ago

why better ? :)

void Over a year ago

Looks better.. :P

Kaiido Over a year ago

@TemaniAfif and void just to nitpick, but the minimum value for setTimeout is 4ms anyway. Also, you could avoid asynchronicity altogether by forcing a reflow (ghost.offsetWidth; would do).

|

Collectives™ on Stack Overflow

Javascript, CSS, button doesn't call the function for an animation after first click [duplicate]

1 Answer 1

6 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Linked

Related