How to trigger click event using JavaScript on querySelectorAll [duplicate]

Question

In jQuery i have the following code

$("li#credit").trigger('click'); 

This code triggers the click event only on li that has id credit.

Now to do this using JavaScript

document.querySelectorAll("li#credit").click(); 

I am getting the error:

click() is not a function

The page I am working have multiple elements with id "credit", I need to trigger a click event only on <li> that has id credit.

Answer 1

querySelectorAll returns a NodeList object (source) and not a DOM element. A NodeList object contains DOM elements.

Your code needs to change to get the first element and then call click():

document.querySelectorAll("li#credit")[0].click(); 

If you want to trigger the .click() event to all elements you can do a for loop

for(var i = 0; i<elems.length; i++) {     elems[i].click(); } 

Answer 2

I found this one is clean and simple.

Array.from(document.querySelectorAll("ali#credit")).forEach(button=>button.click()) 

from this site: https://css-tricks.com/snippets/javascript/loop-queryselectorall-matches/#comment-1602558

edit 1 Thanks to Sliavik in comment.

document.querySelectorAll("ali#credit").forEach(el=>el.click()) 

is safe to call