Почему display none становится flex стразу, при перезагрузке страницы, а не после нажатия как это должно быть?

Рейтинг: -1Ответов: 1Опубликовано: 08.01.2023

я новичок, и хочу сделать попап следующим образом: по дефолту на попапе display:none; а при клике на кнопку display меняется на flex, потом если flex то при клике на окно(попап) он снова возвращается в none

let popupContainer = document.querySelector(".registration__popup-container");
let popup = document.querySelector(".registration__popup");
const openPopup = document.querySelectorAll(".button__reg");

for (let i = 0; i < openPopup.length; i++) {
  openPopup[i].addEventListener('click', function() {
    popupContainer.style.display = "flex";
  });
  if (popupContainer.style.display = "flex") {
    popupContainer.addEventListener('click', function() {
      popupContainer.style.display = "none";
    });
  };
};
.registration__popup-container {
  display: none;
  align-items: center;
  justify-content: center;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, .8);
}
<div class="registration__popup-container">
  <div class="registration__popup">
    <h3 class="registration__popup-title">Ваша заявка<br>успешно отправлена!</h3>
    <img class="popup-сheck-img" src="image/pop-up_reg.svg"></img>
  </div>
</div>

Вот только когда я обновляю страницу попап сразу появляется(то есть он сразу flex) хотя в коде none. Может кто скажет почему так, или есть другие похожие варианты реализации?

css javascript html
Источник: Stack Overflow на русском

Ответы

▲ 0

popupContainer.style.display = "flex" - это не сравнение, а присваивание значения Для сравнения используйте операторы == или ===

Подробнее об операторах сравнения

let popupContainer = document.querySelector(".registration__popup-container")
const openPopup = document.querySelectorAll(".button__reg")

openPopup.forEach(btn => btn.addEventListener('click', () => popupContainer.style.display = "flex"))
  
popupContainer.addEventListener('click', () => popupContainer.style.display = "none")