Double function on click event in javascript-CodePudding

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.

CodePudding user response：

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>

CodePudding user response：

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>