how to add an eventListener on each div in a NodeList

Question

I'm looking for two days on how to add an eventListener on each div in my Nodelist. I'm working with an API for school and we have to display movies and they need to be edited, liked and more so i had the idea to put a "see more" button on movies posters to display buttons and more informations. Here is my code:

const movieIntegration =() => {
    allMovies.map(movie=> {
        movieGallery.innerHTML += `<div class="imgContainer">
                                        <img src="${movie.img}" alt="${movie.name}">
                                                <div class="titleContainer">
                                                    <div class="movieTitle"> ${movie.name} </div>
                                                    <div class="seemore"> See more </div>
                                                </div>
                                    </div>`
    })

const seemore = document.querySelectorAll(".seemore")
    seemore.forEach(elm => {
        elm.addEventListener("click", console.log("this is working"), true)
    })

}

Now I need to get all the divs with a "seemore" class (it returns a NodeList) and add an eventListener that works on click but when I do it and then console.log a message on click, my console displays nine times the message but I havent clicked on the buttons and then, when I click on them, nothing happens.

Can someone help me please ?

(ps: Sorry if you misunderstand, I am bad in English)

Answer 1

You code is not working because you using are the return value of console.log as the listener. If you want the listener to be function that calls console.log use the following syntax

elm.addEventListener("click", () => console.log("this is working"), true)