How can i pass parameters to a function inside click eventlistner

Question

function changeColor(btn){
    btn.style.backgroundColor = "red";
}
let btn1 = document.getElementById("1");
btn1.addEventListener("click",changeColor(btn1));

I know that calling a function in the " addEventListner " immediately call the function. But I do need to pass a object to my function inside " addEventListner() " because I'm planning to use only one general function to handle clicks of 10 buttons.

Answer 1

You have to create an anonymous function () => changeColor(btn)

function changeColor(btn){
    obj.style.backgroundColor = "red";
}
let btn1 = document.getElementById("1");
btn1.addEventListener("click", () => changeColor(btn));

Answer 2

From the above comment...

"A handler function gets passed an Event type to it. An UI event always features a currentTarget and a target property. The OP should access the former... event.currentTarget.style.backgroundColor = "red"; ."

Instead of using the color changing function as callback one could implement a button specific click handler which forwards its current target to a generic function which changes the background color of any passed element reference.

 function changeElementColor(elm){ elm.style.backgroundColor = 'red'; } function handleButtonClick(evt) { changeElementColor(evt.currentTarget); } document.querySelectorAll('button').forEach(btnElm => btnElm.addEventListener('click', handleButtonClick) );

 <button><em>Hallo</em></button> <button><b>World</b></button>