Javascript forEach is not a function

I’m trying to add a click event to all my edit icons. Each icon has an ID that I’m using to call them.

<div><img src="" id="editCatsSVG" /></div>

Here’s my js file below.

const edicatsIcon = document.querySelector('#editCatsSVG'),
      deleteCatsIcon = document.querySelector('#deleteCatsSVG');
      
const catsActionsModal = document.querySelector('#catsActions'),
      closeCatsModal = document.querySelector("#closeModalIConButton");




edicatsIcon.forEach(addEventListener("click", function(){
    catsActionsModal.style.display = "flex";
}));

closeCatsModal.addEventListener("click", function(){
    catsActionsModal.style.display = "none";
    
});

Is there a way I can add the forEach func so when all the editcatsIcon is clicked, the modal shows?

please?

Many thanks.

>Solution :

const edicatsIcon = document.querySelector('#editCatsSVG') will return one element, not an array of elements. Also, you’re querying for elements with the id editCatsSVG, and you can’t have duplicate ids.

This

edicatsIcon.forEach(addEventListener("click", function(){
    catsActionsModal.style.display = "flex";
}));

Should be

edicatsIcon.addEventListener("click", function(){
    catsActionsModal.style.display = "flex";
});