javascript - 为什么点击事件在两次点击后起作用 VANILLA

Question

我正在尝试通过事件监听器只需单击一次即可触发函数。但如果我在一次单击后不执行 F5 触发操作，则会在两次单击(第一次)后发生。

代码:

HTML

    <div class="main-header-navbar">
   ....
        <span class="main-header-navbar-right-icons">
            <i class="fas fa-search header-icon"></i>
            <i class="fas fa-plus header-icon"></i>
        </span>
    </div>

JS

const ADD_FORM_BUTTON = document.querySelector(".fa-plus");
ADD_FORM_BUTTON.addEventListener("click", function (event) {
    event.preventDefault();
    if (ADD_FORM.style.display === "none") {
        ADD_FORM.style.display = "flex";
    } else ADD_FORM.style.display = "none";
});

我错过了什么？

Answer 1

您可能需要将 style="display: none;" 添加到您的 ADD_FORM 中，以便它最初是隐藏的，然后当您单击 fa-加就会显示它。请参阅下面的代码片段:

const ADD_FORM_BUTTON = document.querySelector(".fa-plus");
const ADD_FORM = document.getElementById("form");

ADD_FORM_BUTTON.addEventListener("click", function(event) {
  event.preventDefault();
  if (ADD_FORM.style.display === "none") {
    ADD_FORM.style.display = "flex";
  } else {
    ADD_FORM.style.display = "none"
  };
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet" />

<div class="main-header-navbar">
  <span class="main-header-navbar-right-icons">
    <i class="fas fa-search header-icon"></i>
    <i class="fas fa-plus header-icon"></i>
  </span>
  <div id="form" style="display: none;">ADD_FORM</div>
</div>