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
Brian Johnson
Front End Web Development Techdegree Graduate 20,818 PointsI do not understand this exercise question.. Please help!
i don't even know where to start
const list = document.getElementsByTagName('ul')[0];
list.addEventListener('click', function(e) {
if (e.target.tagName == 'BUTTON') {
}
});
<!DOCTYPE html>
<html>
<head>
<title>JavaScript and the DOM</title>
</head>
<link rel="stylesheet" href="style.css" />
<body>
<section>
<h1>Making a Webpage Interactive</h1>
<p>Things to Learn</p>
<ul>
<li><p>Element Selection</p><button>Highlight</button></li>
<li><p>Events</p><button>Highlight</button></li>
<li><p>Event Listening</p><button>Highlight</button></li>
<li><p>DOM Traversal</p><button>Highlight</button></li>
</ul>
</section>
<script src="app.js"></script>
</body>
</html>
3 Answers
af09
10,704 Points e.target.previousElementSibling.className = "highlight"; // ideal answer
e.target.previousElementSibling.classList.add("highlight"); // alternative answer
Antonio De Rose
20,885 Pointsif you aren't able to understand, on how this is retreived
e.target.previousElementSibling.classList.add("highlight");
I'd suggest, you to go through the videos over and over, the course for Javascript and the DOM by Guil, is one of the best course to get a good solid hang of what is JavaScript, and to understand how to and when to use it.
make sure, you get the maximum out of the developer tools in google chrome make sure you put a lot of console.log's in your javascript code, to do a lot of debugging.
for example save the html file like in a file, then open the file in google chrome
<!DOCTYPE html>
<html>
<head>
<title>JavaScript and the DOM</title>
</head>
<link rel="stylesheet" href="style.css" />
<body>
<section>
<h1>Making a Webpage Interactive</h1>
<p>Things to Learn</p>
<ul>
<li><p>Element Selection</p><button>Highlight</button></li>
<li><p>Events</p><button>Highlight</button></li>
<li><p>Event Listening</p><button>Highlight</button></li>
<li><p>DOM Traversal</p><button>Highlight</button></li>
</ul>
</section>
<script></script>
</body>
</html>
then hit F12, or right click in the html explore page, inspect element, go to the console section code paste the following const list = document.getElementsByTagName('ul')[0]; then in the second line write a console.log(list) and enter to see what is it returning, then find out why TagName is having a array and, why elementById is not having an array
then save the same HTML file again, with the addition of the code in the script section, explore the page, make sure, you open developer tools, and console section, to see what it is returning console.log in the following code.
const list = document.getElementsByTagName('ul')[0];
list.addEventListener('click', function(e) {
if (e.target.tagName == 'BUTTON') {
console.log(e.target.innerHTML);
console.log(e.target)
console.log(e.target.tagName)
}
});
af09
10,704 PointsYou need to add the class "highlight" to the <p> using the "previousElementSibling" property of the clicked button .
Brian Johnson
Front End Web Development Techdegree Graduate 20,818 Pointsi add the class highlight by doing p.className?
Brian Johnson
Front End Web Development Techdegree Graduate 20,818 PointsBrian Johnson
Front End Web Development Techdegree Graduate 20,818 PointsThank you, but i don't understand how you figured out to add in their "classList.add". There was no variable declared in the beginning for classList and i didn't see this taught in the instructors series of lessons. He taught the previousElementSibling but the teacher jumps around and confuses me. Can you help me understand this logic please?