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
Dean Dunlap
Full Stack JavaScript Techdegree Student 3,507 PointsSolution appears to be correct, but is not accepted by the Challenge. I need help identify possible cause.
Hello all! I'm working on Unit 2 Javascript and the DOM, specifically on DOM Traversal. I've created a solution that works when run from MS Code environment, but is not accepted by the challenge. It returns: "One or more of the buttons do not affect their previous sibling paragraphs." I got a great recommendation to change prevLi.className = 'highlight', try prevLi.classList.add('highlight') and to also rename variables for clarity. I have done that, but still have same symptoms. Any help would be greatly appreciated!
var list = document.getElementsByTagName('ul')[0];
list.addEventListener('click', function(e) {
if (e.target.tagName == 'BUTTON') {
let button = event.target;
let p = button.previousElementSibling;
p.classList.add ('hightlight');
}
});
<!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>
1 Answer
rydavim
18,813 PointsGood news! You've definitely got the coding principles down. It's just a simple typo that's stopping the challenge from progressing.
var list = document.getElementsByTagName('ul')[0];
list.addEventListener('click', function(e) {
if (e.target.tagName == 'BUTTON') {
let button = event.target;
let p = button.previousElementSibling;
p.classList.add ('hightlight'); // <-- You've got an extra 't' in here. Should be highlight.
}
});
Nice work, and happy coding!
Dean Dunlap
Full Stack JavaScript Techdegree Student 3,507 PointsDean Dunlap
Full Stack JavaScript Techdegree Student 3,507 PointsThank you! I should have paid better attention in school to have better spellling skills. (See what I did there? ;-) ). Again, thanks for the help and have an awesome day!