Javascript click event listener on multiple elements and get target ID

Question

I have a javascript file that sets an EventListener of 'click' on every element with the <article> tag. I want to get the id of the article clicked when the event fires. For some reason, my code produces nothing!

My javascript:

articles = document.getElementsByTagName('article');
articles.addEventListener('click',redirect(e),false);
function redirect(e){
alert(e.target.id);
}

Why isn't this working? BTW my article setup is in a function called when the window is loaded, and i know that works for sure because that function has other stuff that work.

---

EDIT

So i fixed my code so it will loop and add the listener to every article element, and now i get an alert box with nothing in it. When trying to output the e.target without the ID, i get the following message for every element:

[object HTMLHeadingElement]

Any suggestions?

---

ANOTHER EDIT

My current javascript code:

function doFirst(){
articles = document.getElementsByTagName('article');
for (var i = 0; i < articles.length; i++) {
    articles[i].addEventListener('click',redirect(articles[i]),false);
}
}

function redirect(e){
alert(e.id);
}
window.addEventListener('load',doFirst,false);

This is showing my alert boxes when the page finished loading, without considering that i haven't clicked a damn thing :O

Answer 1

You are not passing an article object to redirect as a parameter.

Try this ( EDIT ):

articles = document.getElementsByTagName('article');
for (var i = 0; i < articles.length; i++) {
    articles[i].addEventListener('click',redirect,false);
}
function redirect(ev){
    alert(ev.target.id);
}

Hope, it will solve the bug.

Answer 2

Why is nobody mentioning a single event which checks for the clicked element?

document.body.addEventListener('click', function(e) {
    var target = e.target;
    if (target.nodeName === 'article') {
        // do whatever you like ;-)
    }
    e.stopPropagation()
});

it's more performant to have less events..

if you don't need to check for click events on the whole body you could attach the event to some closer parent element

Answer 3

You are executing the redirect function instead of passing the reference, try this:

articles = document.getElementsByTagName('article');
articles.addEventListener('click',redirect,false);
function redirect(e){
    alert(e.target.id);
}

Edit: Also, getElementsByTagName returns an array with articles, so you have to loop through them and call addEventListener on each one of them.

articles = document.getElementsByTagName('article');
for (var i = 0; i < articles.length; i++) {
    articles[i].addEventListener('click',redirect,false);
}
function redirect(e){
    alert(e.target.id);
}

Answer 4

getElementsByTagName returns a nodelist. You can then add an eventlistener to each one of those elements with a for loop.

<div id="test">
hey
</div>
<div id="test2">
yo
</div>

<script>
var nl = document.getElementsByTagName('div');

for(var i=0; i<nl.length; i++){
    nl[i].addEventListener('click', function(e){
        alert(e.target.id);
    },false);
}
</script>

Answer 5

This mini javascript libary (1.3 KB) can do all these things

https://github.com/Norair1997/norjs/

nor.event(["#first"], ["touchstart", "click"], [doSomething, doSomething]);

This plugin can handle such stuff and more

Answer 6

Sry for bumping this old post, but I would do something like this

const myElements = document.querySelectorAll("article")
myElements.forEach(x => x.setAttribute("onclick", "alertFunction(this.id)"))

function alertFunction(theId){
alert(theId)
}

That would be if JavaScript is what you need. But today you can use JQuery instead, and that would be less code.

Answer 7

articles.addEventListener('click',redirect,false); // omit redirect(e) inside event listener // and then try with the alert as you did.

if does not work then try by e.id instead of e.target.id inside alert as below:

   alert(this.id);

Thanks.