Как запустить код js при нажатии на кнопку

Рейтинг: 1Ответов: 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

Если я правильно понимаю и задача стоит навесить слушателей при нажатии на кнопку, делаем что-то такое (при условии, что тег <script> расположен в конце body):

// вместо
document.addEventListener('DOMContentLoaded', () => {
// ...
})

// пишем
const button = document.querySelector('.some-button');
button.addEventListener('click', () => {
// ...
})

Если <script> расположен где-то вначале и событие DOMContentLoaded все еще нужно - выносим содержимое в функцию, и ее уже вешаем на кнопку:

const init = () => {
// вся логика из DOMContentLoaded
};

document.addEventListener('DOMContentLoaded', () => {
  const button = document.querySelector('.some-button');
  button.addEventListener('click', init);
});