功能只在第一次点击时运行？

Question

我正在为我为大学开发的ctf游戏网站制作排行榜。我开始玩一些简单的动画，并发现一些我无法弄清楚的错误：1。你必须在登录按钮上点击两次或添加按钮才能在第一时间实际工作。 2.当提交错误的答案时，动画只能运行一次，然后对于任何后续的错误答案都没有任何反应。

这是页面的链接：https://nerdts-4ed61.firebaseapp.com/leaderboards.html

<footer>
    <h6 class="right-ans">
      Correct! Your progress will be added to your account.
    </h6>
  </br>
    <div id="addFlagInput" class="input-group">
      <div class="input-group-prepend">
        <span
          class="input-group-text"
          style="background: transparent; color: white; border-top: none; border-left: none; border-bottom: none; border-width: 2px; border-color: rgba(0,0,0,0.09);"
          id=""
          >Name and flag</span
        >
      </div>
      <input
        id="inputbox1"
        type="text"
        class="form-control transparent-input"
      />
      <input
        id="inputbox2"
        type="text"
        class="form-control transparent-input"
      />
      <div class="input-group-append">
        <button
          id="submitBtn"
          onclick="submit()"
          class="btn btn-light"
          style="background: transparent; color: white; border-color: rgba(0,0,0,0.09);"
          type="button"
        >
          Submit
        </button>
      </div>
    </div>
  </footer>
</div>    
 <!--ANIMATION LOGIN BTN-->
<script>
  function addFlag() {
    const element = document.querySelector("#addFlagBtn");
    element.classList.add("animated", "fadeInDown");
    const display = element.style.display;
    if (display == "none") {
      element.style.display = "block";
    } else {
      element.style.display = "none";
    }
  }
</script>
<!--check user state for flag add-->
<script>
  function isUser() {
    firebase.auth().onAuthStateChanged(function(user) {
      if (user) {
        //show input form
        const inElement = document.querySelector("#addFlagInput");
        inElement.classList.add("animated", "fadeInUp");
        const visibility = inElement.style.visibility;
        if (visibility == "hidden") {
          inElement.style.visibility = "visible";
        } else {
          inElement.style.visibility = "hidden";
        }
      } else {
        //tooltip: you must register to add a flag
        const element = document.querySelector("#addFlagBtn");
        element.setAttribute("title", "You must register to add a flag.");
      }
    });
  }
</script>
<!--Submit button functionality-->
<script>
  function hideText() {
    document.querySelector(".right-ans").style.display = "none";
  }
  function submit() {
    const submitElement = document.querySelector("#inputbox2");
    const answer = submitElement.value;
    console.log("Your answer is: ", answer);
    var database = firebase.database();
    var dbRef = database.ref("flags/");
    dbRef.orderByKey().on("value", snapshot => {
      if (snapshot.exists()) {
        snapshot.forEach(function(data) {
          var val = data.val();
          if (val.id == answer) {
            document
              .querySelector(".right-ans")
              .classList.add("animated", "heartBeat");
            document.querySelector(".right-ans").style.display = "inline";
            console.log("correct!");
            setTimeout(hideText, 5000);
          }
          else {
            const inputdiv = document.querySelector("#addFlagInput");
            inputdiv.classList.remove("fadeInUp");
            inputdiv.classList.add("animated","swing");
          }
        });
      }
    });
  }
</script>

Answer 1

是什么

dbRef.orderByKey().on("value", snapshot => {
  if (snapshot.exists()) {
    snapshot.forEach(function(data) {

做？看起来您拥有实际添加或删除firebase事件侦听器中的类的代码。每次运行函数时，都会再次创建内部的变量或函数，并且每当到达该函数的末尾或在作用域之外时，如果变量是在该作用域内创建的，而不是分配给外部的任何其他变量，它被摧毁了。

因此，每次提交函数运行时，都会再次创建看起来像firebase的事件。

该事件仅在您第二次单击该按钮时运行，因为该事件尚未存在，第一次单击该按钮时，因为它仅在第一次提交（）发生后才存在。