Почему не выполняется вторая часть условия else if()?

Question

<header>
 <nav>
   <button id="btn_toggle">
    <span></span>
    <span></span>
    <span></span>
   </button>

   <div id="navbar_nav">
    <ul>
     <li>home</li>
     <li>home</li>
     <li>home</li>
     <li>home</li>
     <li>home</li>
     <li>home</li>
    </ul>
   </div>

</nav>

//код js в отдельном файле

    let nav_toggle = document.getElementById('btn_toggle');

    nav_toggle.onclick = function () {
        if(document.getElementById('navbar_nav').style.display = 'none') {
            document.getElementById('navbar_nav').style.display = 'flex';
        } else if (document.getElementById('navbar_nav').style.display = 'flex') {
            document.getElementById('navbar_nav').style.display = 'none';
        }
    }

Answer 1

Причина такая же, как и в первом случае. У данного элемента нет данных в атрибуте style, которое вы запрашиваете. Ваше выражение типаdocument.getElementById('navbar_nav').style.display получает ответ "" (пустая строка).

Если хотите получить стили CSS, Вам необходимо использовать window.getComputedStyle(element).display. Подробнее про этот тут

Также у Вас ошибка в условиях. Оператор "=" это присваивания, "==" - сравнение, "===" строгое сравнение без приведение типов.

Answer 2

Пора уже давно перейти на hidden:

document.getElementById('btn_toggle').addEventListener('click', function() {
  var el = document.getElementById('navbar_nav')
  el.hidden = !el.hidden
})

[hidden] {
  display: none !important;
}

#navbar_nav {
  display: flex;
  list-style: none;
}

#navbar_nav li {
  padding: .25em;
}

<nav>
  <button id="btn_toggle">
    <span></span>
    <span>&nbsp;</span>
    <span></span>
  </button>

  <ul id="navbar_nav" hidden>
    <li>home</li>
    <li>home</li>
    <li>home</li>
    <li>home</li>
    <li>home</li>
    <li>home</li>
  </ul>
</nav>

Answer 3

Воодушевлённый ответом Qwertiy я сделал так (с плавным исчезновением).

document.getElementById('btn_toggle').addEventListener('click', function() {
  var el = document.getElementById('navbar_nav')
  el.hidden = !el.hidden
})

[hidden] {
  visibility: hidden;
  opacity: 0;
}

#navbar_nav {
  display: flex;
  list-style: none;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

#navbar_nav li {
  padding: .25em;
}

<nav>
  <button id="btn_toggle">
    <span></span>
    <span>&nbsp;</span>
    <span></span>
  </button>

  <ul id="navbar_nav" hidden>
    <li>home</li>
    <li>home</li>
    <li>home</li>
    <li>home</li>
    <li>home</li>
    <li>home</li>
  </ul>
</nav>

БЛОГ НА HUSL

Почему не выполняется вторая часть условия else if()?

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