Why an error? How to make it correct?

Question

Here is my code https://code.sololearn.com/WgDhd20XQf5R/?ref=app Why is it showing an error? How can I correct it? Thanks for answering.

Answer 1

A little change in JS:
*********************
function Se(){
var Ji = document.getElementById("Re");
Ji.style.animationName="Cri";
}
*********************
This will definitely work!:)

Answer 2

Where is the id "Re"?
You should specify it somewhere (for any tag), like if you want it on your button, you can do :

<button id="Re" onclick="Se()">Bi<button>

And, for the CSS, id's are defined using a "#" before it.

Answer 3

That's because you didn't put Cy in the @-webkit-keyframes part or Cri in the animation-name part.

Try implementing either of the two!

Answer 4

@Forge: Exactly what @Biraj said. The animationName property sets or returns a name for the @keyframes animation. Just animation would not do ^^

Answer 5

@Dev I am trying to control CSS animation through JS function.
When someone clicks the button it changes the animation name of Re from Cy to Cri where Cri is defined hence animation will took place.

Answer 6

Oh I was in hurry that's why I didn't notice that. But I have tried what you are saying in an previous code and it still not works. Check the Code Here again.

Answer 7

Thanks @Biraj and @Dev