Как я могу повторить анимацию (CSS и Javascript onclick)

Question

Как я могу повторить анимацию, которая установлена ​​с помощью CSS и Javascript на onclick? Я писатель самого новичка и знаю HTML, CSS и Javascript. Я не знаю, почему следующие онлайн-клики и функции просто работают один раз. Буду признателен, если вы мне поможете.

Код

function discharge() { 
 
    document.getElementById("electron").style.visibility = "visible"; 
 
    document.getElementById("electron").style.WebkitAnimation = "mymove 5s 1 backwards"; // Code for Chrome, Safari, and Opera 
 
    document.getElementById("submit").style.backgroundColor = "lightblue"; 
 
    document.getElementById("submit").style.boxShadow = "0px 3px 3px red"; 
 
    document.getElementById("submit1").style.backgroundColor = "#4CAF50"; 
 
    document.getElementById("submit1").style.boxShadow = "0px 0px 0px red"; 
 
}

#electron { 
 
    position: relative; 
 
    left: -10px; 
 
    visibility: hidden; 
 
} 
 
@-webkit-keyframes mymove { 
 
    0% { 
 
     left: 0px; 
 
     top: 0px; 
 
    } 
 
    25% { 
 
     left: -32px; 
 
     top: 0px; 
 
    } 
 
    50% { 
 
     left: -32px; 
 
     top: -20px; 
 
    } 
 
    75% { 
 
     left: 158px; 
 
     top: -20px; 
 
    } 
 
    100% { 
 
     left: 158px; 
 
     top: 5px; 
 
    } 
 
}

<div> 
 
    <button id="submit" onclick="discharge()">Discharge</button> 
 
    <button id="submit1">charge</button> 
 
</div> 
 

 
<div id="electron"> 
 
    <br /><i class="fa fa-minus-circle"></i> 
 
    <br /><i class="fa fa-minus- circle"></i> 
 
    <br /> 
 
</div>

Answer 1

Пожалуйста, используйте этот ответ, чтобы решить ваши проблемы

HTML

<div> 
    <button id="submit" onclick="discharge()">Discharge</button> 
    <button id="submit1" onclick="charge()">charge</button> 
</div> 

<div id="electron"> 
    <br/><i class="fa fa-minus-circle"></i> 
    <br/><i class="fa fa-minus- circle"></i> 
    <br/> 
</div> 

Javascript

discharge = function() { 
    document.getElementById("electron").style.visibility = "visible"; 
    document.getElementById("electron").style.WebkitAnimation = "mymove 5s 1 backwards"; // Code for Chrome, Safari, and Opera 
    document.getElementById("submit").style.backgroundColor = "lightblue"; 
    document.getElementById("submit").style.boxShadow = "0px 3px 3px red"; 
    document.getElementById("submit1").style.backgroundColor = "#4CAF50"; 
    document.getElementById("submit1").style.boxShadow = "0px 0px 0px red"; 
} 

charge = function(){ 
document.getElementById("electron").removeAttribute('style'); 
document.getElementById("submit").removeAttribute('style'); 
document.getElementById("submit1").removeAttribute('style'); 
} 

Никаких изменений в CSS.

Answer 2

данный Javascript код, имеющий проблему с определением функции. Пожалуйста, используйте discharge = function(){ Есть некоторые недостающие элементы, такие как electron и li Также я не могу найти какую-либо функцию под названием charge()

Так я комментируемые недостающие элементы и приводится ниже.

discharge = function() { 
// document.getElementById("electron").style.visibility = "visible"; 
// document.getElementById("li").style.visibility = "visible"; 
// document.getElementById("electron").style.WebkitAnimation = "mymove 5s 1 backwards"; // Code for Chrome, Safari, and Opera 
document.getElementById("submit").style.backgroundColor = "lightblue"; 
document.getElementById("submit").style.boxShadow = "0px 3px 3px red"; 
document.getElementById("submit1").style.backgroundColor = "#4CAF50"; 
document.getElementById("submit1").style.boxShadow = "0px 0px 0px red";}