Double function on click event in javascript

Question

how can i add a double function on the same click button without colliding with the first function.

btn.addEventListener('click', drop);

function drop(){
items.style.display = 'block';
items.style.display = 'none';

drop down menu in html.

Answer 1

Simply bind the function using addEventListener multiple times.

 const btn = document.getElementById('btn'); btn.addEventListener('click', job1); btn.addEventListener('click', job2); function job1(){ console.log('Job 1 triggered'); } function job2(){ console.log('Job 2 triggered'); }

 <button id="btn">Click me</button>

Answer 2

You can wrap your functions in a function:

 const btn = document.getElementById('btn'); btn.addEventListener('click', () => {drop(), other()}); function drop(){ // items.style.display = 'block'; // items.style.display = 'none'; console.log('drop triggered'); } function other(){ console.log('other triggered'); }

 <button id="btn">Click me</button>