Как сделать Javascript функцию, которая изменит стиль отображения элемента?

Question

function burgerMenu(){
            //alert(document.getElementById("hiddenMenuUL").style.display);
            if(document.getElementById("hiddenMenuUL").style.display="none"){
                document.getElementById("hiddenMenuUL").style.display="block";
            }
            else if(document.getElementById("hiddenMenuUL").style.display="block"){
                document.getElementById("hiddenMenuUL").style.display="none";
            }
    }

Я хочу переключить значок меню бургера. Поэтому, если я нажму на иконку, функция burgerMenu () будет переключаться и проверять, отображается ли ее отображение: нет, затем меняется на отображение: блокировать и наоборот. hiddenMenuUL - для списка ссылок. Эта строка ниже является строкой кнопки в HTML:

<button class="btn" onclick="burgerMenu()">&#9776;</button>

My CSS для hiddenMenuUL

#hiddenMenuUL{
        display: none;
        list-style: none;
        width: 100%;
        justify-content: center;
    }

Answer 1

Когда вы пишете свой if, вы на самом деле не проверяете, отображается ли === «none», вы пытаетесь установить для него значение none.

То, что вы должны делать, выглядит следующим образом:

function burgerMenu(){
            let menuStyle = document.getElementById("hiddenMenuUL").style.display;
            if(menuStyle === 'none'){
                document.getElementById("hiddenMenuUL").style.display="block";
            }
            else {
                document.getElementById("hiddenMenuUL").style.display="none";
            }
    }

Редактировать:

Кажется, правило отображения определено в CSS, и не встроенный

.style может работать только со встроенными стилями, например:

<div id="hiddenMenuUL" style="display: none;"></div>

Добавление встроенного отображения: нет, как в примере выше, должно быть самым быстрым и простым способом «исправить» его. в вашем конкретном сценарии, хотя это, вероятно, не будет считаться лучшей практикой.