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
behar
10,799 PointsJavascript, addEventListener not working
Hey guys! I have made a table, with 10 tr's each having 10 td's. This is layed out as a grid that 10 x 10. I have added a class="table2" to each of the tds, and ids ranging from 0 - 99.
Im trying to addEventListener to each of the individual td's. My code looks like this:
let mark2 = document.querySelectorAll(".table2");
for (let i = 0; i <= 99; i++) {
mark2[i].addEventListener("click", function clicked3() {
mark2[this.id].style.backgroundColor = "black";
});
};
So basicly im trying to make it so that if you click the a td, that specific td will turn black. However when i run this, im getting the error: Uncaught TypeError: Cannot read property 'addEventListener' of undefined.
I dont get this, i defined it just above? Help would be greatly appreciated!
1 Answer
Steven Parker
230,958 PointsThe id values in table2 are not numbers. They are all strings beginning with the letter "a" followed by a number.
So instead of "mark2[this.id]", you need something like "mark2[parseInt(this.id.slice(1))]".
behar
10,799 PointsThx for the response steven, im not sure i understand tho. I tried just replacing it with your code:
let mark2 = document.querySelectorAll(".table2");
for (let i = 0; i <= 99; i++) {
mark2[i].addEventListener("click", function clicked() {
mark2[parseInt(this.id.slice(1))].style.backgroundColor = "black";
});
};
This returns: Uncaught TypeError: Cannot read property 'addEventListener' of undefined at Javascript.js:114. So still the same issue. And also i dont think thats the only issue, because even if you simply try to sellect the .table2 class, something will go wrong, it wont be sellected correctly.
Steven Parker
230,958 PointsOdd, that same exact code works for me. Could something have changed in the HTML?
behar
10,799 PointsWell no, i have not changed anything in the html what so ever. (Took an in depth look just now, and copy pasted what i posted above). The code does not work, have you tried to actually copy paste both the html and js file and launched it, because i think that when the issue will occour?
behar
10,799 PointsCould it have anything to do with the fact that i used global variables?
Steven Parker
230,958 PointsWhen I use that script code with the HTML from above, I can click on the cells of the 2nd table and they turn black.
Is this in a workspace where you share the entire thing in a snapshot?
behar
10,799 PointsI didnt create this in a workspace, i made it on my local machine. But i wanted to show you it didnt work, and so i created i workspace, made 3 files, for html css and js, names them exacly the same, and then copy pasted the code. And it works in the worksspace?? This makes no sense what so ever. The code at this point dosent even throw an error it just does not respond to clicks. I can include some screenshots, but im not sure if they would be usefull at all
Steven Parker
230,958 PointsScreenshots are not very useful, but a snapshot would allow me to replicate your exact environment and try it out.
behar
10,799 PointsRiight so this is rather embarrising. Apperently when i moved the files into another folder it automaticly created a copy of the .js file in the original folder. This was ofcourse the file that i had open in sublime text, but the index.html was linked to the .js file in the new folder.. So basicly from the point that it threw an error, i was implementing all of these changes in the .js file that was not linked to the index.html, which is why it kept giving me the same error, and why it worked im the worksspace... So sorry for wasting your time Steven, but thanks for the code you originally provided, it works perfectly now!
behar
10,799 Pointsbehar
10,799 PointsOk so something seriously strange is going on here. Below ill link both my html and javascript document: HTML:
JAVASCRIPT:
So at the very top of the javascript document i am sellecting both the td's with the class .table and .table2... table works just as it should, but .table2 has some weiiird behaviour. If you open the developer tools and you write mark[0], it will return: <td class="table" id="0"></td>, as excpected. However do the same for test, and it will return: undefined. This makes no sense to me