Не могу понять как переместить действие на кнопку а не на DOM

Рейтинг: 0Ответов: 1Опубликовано: 07.02.2023

Код работает при загрузке страницы, а не при нажатии на кнопку

document.addEventListener('DOMContentLoaded', () => {
    const menuBtns = document.querySelectorAll('.header-for-992px__nav__ul__li_span');
    const drops = document.querySelectorAll('.header-for-992px__nav__ul-menu');

    menuBtns.forEach(el => {
        el.addEventListener('click', (e) => {
            let currentBtn = e.currentTarget;
            let drop = currentBtn.closest('.header-for-992px__nav__ul__li').querySelector('.header-for-992px__nav__ul-menu');


            menuBtns.forEach(el => {
                if(el !== currentBtn){
                    el.classList.remove('activee');
                }
            });

            drops.forEach(el => {
                if(el !== drop){
                    el.classList.remove('grid-header')
                }
            })

            drop.classList.toggle('grid-header')
            currentBtn.classList.toggle('activee');
        })
    })

    document.addEventListener('click', (e) => {
        if(!e.target.closest('.header-for-992px__nav')){
            menuBtns.forEach(el => {
                el.classList.remove('activee');
                
            });
            drops.forEach(el => {
                el.classList.remove('grid-header')
            })
        }
    })
});

javascript
Источник: Stack Overflow на русском

Ответы

▲ 0

Для этого необходимо выбрать в DOM нужную кнопку и уже на нее повесить обработчик
Допустим, кнопка у вас такая

<button id='changeButton'></button>

Тогда

// Находим кнопку и помещаем ее в переменную (для наглядности)
const myButton = document.getElementById('changeButton');
// Вешаем событие нажатия на кнопу
myButton.addEventListener('click', (e) => { ... })

В сокращенном виде, если далее по коду кнопка нигде не используется, то можно сделать так

document.getElementById('changeButton').addEventListener('click', (e) => {...})


document.addEventListener('DOMContentLoaded', () => {
    const menuBtns = document.querySelectorAll('.header-for-992px__nav__ul__li_span');
    const drops = document.querySelectorAll('.header-for-992px__nav__ul-menu');
    
    menuBtns.forEach(el => {
        el.addEventListener('click', (e) => {
            let currentBtn = e.currentTarget;
            let drop = currentBtn.closest('.header-for-992px__nav__ul__li').querySelector('.header-for-992px__nav__ul-menu');


            menuBtns.forEach(el => {
                if(el !== currentBtn){
                    el.classList.remove('activee');
                }
            });

            drops.forEach(el => {
                if(el !== drop){
                    el.classList.remove('grid-header')
                }
            })

            drop.classList.toggle('grid-header')
            currentBtn.classList.toggle('activee');
        })
    })
    
    const myButton = document.getElementById('changeButton');
    
    myButton.addEventListener('click', (e) => {
        if(!e.target.closest('.header-for-992px__nav')){
            menuBtns.forEach(el => {
                el.classList.remove('activee');
                
            });
            drops.forEach(el => {
                el.classList.remove('grid-header')
            })
        }
    })
});
<button id='changeButton'></button>