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外观的事件。

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

功能仅在首次点击时运行？

1 个答案: