Не срабатывает JavaScript функция

Оффтоп javascript
1

Создаю мобильную страницу с выпадающим меню на JavaScript, но функции не работают как надо.

Вот мой JS код:

<script>
window.onload = function () { 
  var mobileNav = document.getElementById('mobileNavigation');
  var menuIcon = document.getElementById('menuButton');
  var closeIcon = document.getElementById('closeButton');
}

function showMenu() {
    mobileNav.style.transition = "height 1s ease 0s";
    mobileNav.style.height = "300px";
    
    menuIcon.style.transition = "opacity 0.4s ease 0s";
    menuIcon.style.opacity = "0";
    menuIcon.style.zIndex = "0";
    
    closeIcon.style.transition = "opacity 0.4s ease 0.4s";
    closeIcon.style.opacity = "1";
    closeIcon.style.zIndex = "1";
}

function hideMenu() {
    mobileNav.style.transition = "height 1s ease 0s";
    mobileNav.style.height = "90px";
    
    menuIcon.style.transition = "opacity 0.4s ease 0.4s";
    menuIcon.style.opacity = "1";
    menuIcon.style.zIndex = "1";
    
    closeIcon.style.transition = "opacity 0.4s ease 0s";
    closeIcon.style.opacity = "0";
    closeIcon.style.zIndex = "0";
}
</script>

А вот HTML разметка:

<div id="menuButton" onclick="showMenu();"></div>
<div id="closeButton" onclick="hideMenu();"></div>

Раньше переменные объявлял прямо внутри функций, но тогда каждая функция срабатывала только один раз. Сейчас вынес их в window.onload, но все равно что-то не так. Подскажите, в чем может быть проблема?

2

Добавь проверку, что элементы найдены - если getElementById вернет null, будет ошибка. Поставь if (mobileNav && menuIcon && closeIcon) перед функциями. И у тебя точно есть элемент с id=“mobileNavigation” в HTML? В JS ты его ищешь, а в разметке не показал.

3

Это проблема области видимости. Переменные внутри window.onload недоступны для showMenu и hideMenu. Вынеси var mobileNav, menuIcon, closeIcon из функции onload - объяви их глобально. Или замени onclick в HTML на addEventListener. Что выберешь?

4

у меня было то же самое! оберни весь код в window.onload - переменные, showMenu, hideMenu, всё туда. и замени onclick на addEventListener в js, так правильнее. у меня сразу заработало, никаких проблем с глобальными переменными.

5

Используй замыкания - оберни всё в IIFE. Переменные станут доступны всем функциям внутри:

(function() {
    var mobileNav, menuIcon, closeIcon;
    
    window.onload = function () { 
        mobileNav = document.getElementById('mobileNavigation');
        menuIcon = document.getElementById('menuButton');
        closeIcon = document.getElementById('closeButton');
    }
    
    window.showMenu = function() {
        // твой код
    }
    
    window.hideMenu = function() {
        // твой код  
    }
})();

Все функции внутри будут видеть эти переменные.

6

Проблема в видимости переменных. Ты объявил mobileNav, menuIcon и closeIcon внутри window.onload, а функции showMenu() и hideMenu() находятся в глобальной области и не видят эти переменные.

Вынеси объявление переменных из window.onload или перемести функции внутрь. Вот так:

var mobileNav, menuIcon, closeIcon;

window.onload = function () { 
  mobileNav = document.getElementById('mobileNavigation');
  menuIcon = document.getElementById('menuButton');
  closeIcon = document.getElementById('closeButton');
}

Тогда переменные будут доступны везде.

7

У тебя классическая проблема области видимости в js. Переменные внутри window.onload локальные - showMenu и hideMenu их не видят. Объяви переменные глобально, а значения присваивай в onload. Или оберни весь код в одну функцию и используй addEventListener вместо onclick в html.