Почему не получается и открыть, и закрыть меню по 1 кнопке через чистый js

Question

Всем привет : ) Пытался оформить функционал toggle, но как всегда что-то пошло не так. Ни так:

settingsToggle.onclick = function () {
  let i = 0
  i++
  if (i % 2 == 0) {
    settingsPopup.style.visibility = "visible"
  } else {
    settingsPopup.style.visibility = "hidden"
  }
}

Ни так не работает:

settingsToggle.onclick = function () {
  if (settingsPopup.style.visibility == "hidden") {
    settingsPopup.style.visibility = "visible"
  } else {
    settingsPopup.style.visibility = "hidden"
  }
}

Я так понимаю это так неосуществимо или все-таки опять ошибка в синтаксисе?

Answer 1

let i = 0;
settingsToggle.onclick = function () {
  if (++i % 2 == 0) {
    settingsPopup.style.visibility = "visible";
  } else {
    settingsPopup.style.visibility = "hidden";
  }
};

Answer 2

const settingsToggle = document.querySelector('.settingsToggle')
const toggle = (e) => {
    e.target.classList.toggle('toggle')
}
settingsToggle.addEventListener('click',toggle)

.toggle{
    background-color: red;
}

.settingsToggle{
    width: 100px;
    height: 100px;
    border: 1px solid black;

<div class="container">
     <div class="settingsToggle"></div>
</div>

БЛОГ НА HUSL

Почему не получается и открыть, и закрыть меню по 1 кнопке через чистый js

Ответы (2 шт):