Не могу найти ошибку, почему не выпадает меню?

Question

[Greeg Zagrelov]

https://jsfiddle.net/9768kf4n/8/

<nav>
    <div class="openMenu" id="openMenu">  Open  </div>

<ul id="menu">
    <li>
        <a href="#">Hello</a>
    </li>
    <li>
    <a href="#">Hello</a>
    </li>
    <li>
    <a href="#">Hello</a>
    </li>
    <li>
    <a href="#">Hello</a>
    </li>
    <li>
    <a href="#">Hello</a>
    </li>
    <li>
    <a href="#">Hello</a>
    </li>



</ul>







</nav>

nav{


    position: relative;
    text-align: center;
}
nav ul{
    display:inline-block;
   background-color: black;
    margin: 0;
    padding: 0;
    list-style: none;
}
nav ul li{
    display: inline-block;
}
nav ul li a{
    display: block;
    padding: 10px 15px;
    color: black;
    text-decoration: none;
}
.openMenu{
    display: none;
    color: red;
    padding: 10px 15px;
    cursor: pointer;
}

@media (max-width: 767px) {
    .openMenu{display: block}
    nav ul{display: none;position: absolute;top: 100%;left:0;
    width: 100%}
    nav ul:active{display: block }
    nav ul li{display: block }
}






<code lang="javascript">
window.onload = function () {
    var menuStyle = getComputedStyle(menu);
    openMenu.onclick = function () {
        if (menuStyle.display == 'none'){
            menu.classList.add("active")
            this.innerHTML = "Open";
        }else {
            menu.innerHTML.remove("active")
            this.innerHTML = "Close";
        }
    }
}
</code>

Answer 1

[hzzzzl]

openMenu.onclick = function () {}
эта штука вообще не вызывалась, можно было туда console.log('я здесь') положить чтобы проверить



nav ul:active{display: block }
и здесь :active это не имя класса, имя класса через точку ul.active

Comments

[Greeg Zagrelov]

вот же косяк, спасибо .

Answer 2

[Николай Чуприк]

А где определение переменных menu и openMenu ?

var menu = document.querySelector ('#menu' );
var openMenu = document.querySelector ('#openMenu' );

UPD: Да там всё из одних ошибок. Такое впечатление, что вы выдрали откуда-то кусок кода и вообще не понимаете, что там происходит.

1. Класc active вообще не определён.
2. При открытии меню (если всё предыдущее исправить) у него вообще уничтожается всё содержимое, заменяясь на надпись open.

Там вообще всё надо выкинуть, изучить JS, а потом написать нормально с нуля.

Comments

[Greeg Zagrelov]

2 недели учу Js, сейчас вы подсказали я буду разбираться почему так работает.

[Николай Чуприк]

Условие надо поменять на противоположное на if ( menuStyle.display != 'none' )

А вообще надо проверять не наличие атрибута, ибо это это нехорошо, а класса active:if ( !menuStyle.classList.contains( 'active' ) )