Bummer! You must be logged in to access this page.

Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by behar
behar
10,800 Points

addEventListener

Hey guys! I have made a table and i have labled every td with the class "table". Ive added some width and height to the tds so that it looks like grid. What i want is so that when you press any of the td's it will log "test" to the console, but my code dosent work:

let mark = document.querySelectorAll(".table")
mark.addEventListener ("click" function clicked() {
    console.log("test")
})

There are 100 tds in the table and i have added an id from 0-99 to each of the tds, if i wanted to log exacly which td the user has clicked, how would i do that?

brendon hanson
brendon hanson
6,191 Points

Ok great! I always run into problems with querySelectorAll

2 Answers

behar
behar
10,800 Points

However i figured out the issue. It has to do with the fact that when sellecting an element by class, it returns an HTML collection. So i needed to specify an index value to the var "mark".

brendon hanson
brendon hanson
6,191 Points
brendon hanson
brendon hanson
6,191 Points

Looks like you just have a simple error. You forgot the comma after the click. Should look like this: "click", Also you forgot semi-colons at the end of you event listener and after you selected the "table".

If this doesn't resolve your issue let me know and if it does choose best answer.

behar
behar
10,800 Points

Nope this does not fix the issue. Updated code:

let mark = document.querySelectorAll(".table");
mark.addEventListener("click", function clicked() {
    console.log("test");
});

I am getting an uncaught type error: mark.addEventListener is not a function.