功能仅在第一次单击时运行

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看起来可以再次创建。

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