Javascript click event listener on multiple elements and get target ID

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

Answers:

Answer

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

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

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

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

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
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.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.