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

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-03T10:39:47.347

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 03 '18 at 10:39

answered Mar 03 '18 at 10:34

void

36,090
8
62
107

even with 0 instead of 1 it will work ;) – Temani Afif Mar 03 '18 at 10:38
But 1 looks better there @TemaniAfif – void Mar 03 '18 at 10:39
why better ? :) – Temani Afif Mar 03 '18 at 10:42
1

Looks better.. :P – void Mar 03 '18 at 10:43
@TemaniAfif and void just to nitpick, but the minimum value for setTimeout is [4ms](https://html.spec.whatwg.org/multipage/timers-and-user-prompts.html#timers) anyway. Also, you could avoid asynchronicity altogether by forcing a reflow (`ghost.offsetWidth;` would do). – Kaiido Mar 05 '18 at 12:30
@Kaiido you are refering to this `Timers can be nested; after five such nested timers, however, the interval is forced to be at least four milliseconds.` ...which is not the case ;) the use of 0 here is enough .. 4ms is need for nested ones – Temani Afif Mar 05 '18 at 12:43

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

1 Answers1