为什么两次单击后点击事件起作用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中，以便第一次隐藏它。

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>