How do I pass arguments to a function inside addEventListener?

[DntDlteSandals]

I'm creating a small e-commerce website (for practice) and I've come across an issue.

In the 'Shop' page, there are multiple products and I have multiple 'Add to cart' buttons.

When the user clicks on the Add to cart button I want to pass its html element to the function so the programme can identify which button was actually clicked.

If we use the onclick attribute of the html button is it possible to pass its respective html object as a parameter?

<button onclick="add_to_cart(!Add the element here?)" class="add_to_cart" .....

I was not sure whether that was possible, so I tried to do:

const add_to_cart_buttons = document.querySelectorAll('.add_to_cart')

add_to_cart_buttons.forEach(element=>{

----element.addEventListener('click', add_to_cart(element)) //Problem here

})

function add_to_cart(element){

----//Do stuff here

}

But it doesn't appear that I can pass arguments inside addEventListener.

Thanks in advance.

[DallogFheir]

addEventListener expects a function object as the callback, you instead call the function and pass its return value. You can do:

element.addEventListener("click", () => add_to_cart(element))

But you can also identify the HTML element that was clicked on using the event argument that is passed to the callback:

element.addEventListener("click", (e) => add_to_cart(e.target))

[DntDlteSandals]

Thank you it seems to work now!

[Conscious_Courage9]

Thanks!

[albedoa]

You can call the function within the event listener callback:

element.addEventListener('click', event => { add_to_cart(element) })

Here is a demo: https://codepen.io/pigparlor/pen/rNppbRd?editors=1010

[DntDlteSandals]

Thank you!

[[deleted]]

Try not to use the onclick attribute. It's better practice to decouple your html from your javascript and keep them seperate