addEventListener byt tag

Question

I have a file structure like

Those

tags include some content, and I would like to open/close them, but using a pure javascript only. I've tried so using the document.querySelectorAll, for now the code goes something like this

let lis = document.querySelectorAll('#root > li');
function show(e) {
  alert('hey');
}
lis[1].addEventListener('click', show(), false);

But it alerts only when I refresh the page, not "listening" to the actual click, and I still don't know how to refer a precise element. Maybe there are some articles I could use?

P.S. I can't modify the HTML code, so I can't use document.getElementById, and jQuery is also not for me at the moment. Thanks a lot in advance.

user_9208887 · Answer

The issue is that you invoke the show function instead of passing it to the addEventListener method.

You should pass the function so that it can be invoked later when the event occurs.

lis[1].addEventListener('click', show, false);

user_5108695 · Answer

According to the https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

Your code is working fine, and there is not an issue of page reload, its triggered instantly

let lis = document.querySelectorAll('#root > li');
function show(e) {
  alert('hey');
} debugger;
lis[1].addEventListener('click', show, false);


  Just for info we are applying listener to lis[1] it means list 2 because array starts with 0 
lis[1].addEventListener('click', show(), false);



    List 1
    List 2
    List 3
    List 4

addEventListener byt tag

2 Answers