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
ammarkhan
Front End Web Development Techdegree Student 21,661 PointsMy code won't work
I tried doing the code with my simple code but it doesn't work, instead got console errors. Wondering if someone can help me find out what is wrong with my code and how can i debug it
const element = getElementById("body");
document.addEventListener("click", function(){
element.style.background = "#00FF00";
});
Jeremy Hamilton
7,229 PointsGil, this is not the correct way to use arrow functions. They are used instead of the function keyword for anonymous functions, not in conjunction.
3 Answers
John Reardon
Front End Web Development Techdegree Graduate 16,916 PointsAre you trying to select an element with the id of #body? Or are you trying to select the body element tag? If you are trying to do the latter I think you need to use something like document.getElementsByTagName("BODY")[0]. You may also need to use element.style.backgroundColor = "#00FF00" instead of just background in order to change the color. Good luck!
ammarkhan
Front End Web Development Techdegree Student 21,661 PointsJohn Reardon thnx, why do we have use body in uppercase and pass a array of 0?
John Reardon
Front End Web Development Techdegree Graduate 16,916 PointsYou don't have to have body in uppercase, the example I was using was had used uppercase but it is not required. When you use document.getElementsByTagName it will return a collection of html elements that have the matching tag name. You use the index[0] in order to select the first occurrence of that specific element.
John Reardon
Front End Web Development Techdegree Graduate 16,916 PointsWell as far as I understand when you use document.getElementsByTagName it will return a collection of html elements that have the matching tag name. You use the index[0] in order to select the first occurrence of that specific element.
As far as using uppercase I am not entirely sure. It may not be mandatory but I have seen it as a convention in various resources with regards to using getElementsByTag. Maybe someone with more experience could elaborate on that. Here are a few links for more info:
https://www.w3schools.com/jsref/met_element_getelementsbytagname.asp
https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByTagName
Jeremy Hamilton
7,229 PointsCaps isn't required. The mozilla docs show all examples using lowercase.
Gil Silva
3,220 PointsGil Silva
3,220 PointsYou forgot to add "=>" after the function.
also try to avoid naming variable and function with words like "element", since it is similar Element, making it difficult for other programmers to read.
element.addEventListener("click", function() => { element.style.color="#00FF00"; });