Почему клик срабатывает после двух кликов VANILLA - PullRequest
Новая
       66

Почему клик срабатывает после двух кликов VANILLA

0 голосов
/ 09 апреля 2020

Я пытаюсь вызвать функцию через прослушиватель событий одним щелчком мыши. Но это происходит после двух щелчков (в первый раз), если я не выполняю 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";
});

Чего мне не хватает?

1 Ответ

1 голос
/ 09 апреля 2020

Возможно, вам нужно добавить style="display: none;" к вашему ADD_FORM, чтобы он изначально был скрыт, а затем, когда вы нажмете на fa-plus, он отобразит его. Смотрите фрагмент ниже: 

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>
...