addEventListener（）不能多次使用。纯粹的javascript

Question

我尝试使用纯Javascript进行代码质询，但addEventListener上的函数只能运行一次。我试图在网上寻找可能的答案，但显然有些东西不起作用。

这是我的代码！

var btn = document.getElementById("next");

btn.addEventListener("click", clickDelay);

function clickDelay(){
document.getElementById("testing").classList.add("mystyle");
setTimeout(function() {
    document.getElementById("testing").classList.add("new-style");
}, 1000); }

这里是SASS

.mystyle
animation: animatedBackground 10s linear infinite

.new-style
animation-play-state: paused

请帮忙！

Answer 1

当元素已经是该类的成员时，添加类mystyle 将无效。

你应该改变你的逻辑：

• animation属性默认情况下在元素上设置（即不需要由JS添加类）。
• animation-play-state在元素上设置为paused（默认情况下也如上所述）。
• 使用JS添加类会将animation-play-state更改为running
• 您传递给setTimeout 的功能会删除该类（将animation-play-state设置回paused。