Javascript 如何在将显示更改为隐藏时阻止函数重复

这是我的

startQuiz（）

函数，它绑定到开始按钮

我单击开始按钮将测验的显示设置为flex。这里的问题是提交按钮

当我单击submit按钮并运行submit（）时，一切正常，1登录到控制台

当我运行

closequick（）

时，问题就出现了，它只是将测验显示改回无。运行

startQuiz（）

将显示重置为flex后，运行submit（）会导致控制台记录两次

这种模式继续下去，每次我运行

closequick（）

并重新打开测验时，submit（）都会运行越来越多次

请帮助我只运行一次submit（），谢谢

function startQuiz(){
    quizBox.classList.remove("hide");
    populateAnswers();
}

function closeQuiz(){
    quizBox.classList.add("hide");
}

function populateAnswers(){
    document.getElementById("submit").addEventListener("click" , () => {
        submit();}
        )
}

function submit(){
    console.log(1)
    } 

---

每次运行startQuiz（），都会向“提交”按钮添加一个事件侦听器。第一次调用startQuiz（）时，添加事件侦听器。closequick（）之后，当您调用startQuiz（）将display重置为flex时，会在submit按钮中添加一个事件侦听器，这会导致控制台记录两次，并使用1，以此类推

---

最初只将事件侦听器添加到提交按钮一次，或者在调用closequick（）时删除事件侦听器.

这个问题是因为在您的代码中，每当调用

populateAnswers

时，

click

的新事件侦听器将添加到id为

submit

的元素中，因为侦听器是作为匿名函数添加的。因为匿名函数是不相同的，即使是使用相同的、不变的源代码定义的，只是重复调用，即使是在循环中。因此，每次添加一个以上的函数作为新的侦听器时

为了解决问题，send

submit

方法将自身引用为侦听器，即使函数被多次调用，也不会添加多个侦听器。因为如果使用相同的参数在同一EventTarget上注册了多个相同的EventListener，则会丢弃重复的实例。它们不会导致调用两次

EventListener

，也不需要使用removeEventListener（）方法手动删除它们

通过使用以下实现更改代码，将解决您面临的问题

函数populateAnswers（）{
document.getElementById（“提交”）.addEventListener（“单击”，提交）
}

---

希望这有帮助。

请检查是否存在任何重复的div id。如果它存在，请尝试更改它。我只是认为这可能是问题所在。所有的div id都是不同的。每次我出于某种原因调用closequick（）和startQuiz（）时，这个程序似乎经历了越来越多的递归。