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 JavaScript and the DOM (Retiring) Traversing the DOM Sibling Traversal

Muhammad Raza
Muhammad Raza
3,678 Points
Posted by Muhammad Raza
Muhammad Raza
3,678 Points

Can somebody Please look at my code for this challenge I cant figure out what missing?

var list = document.getElementsByTagName('ul')[0];

list.addEventListener('click', function(e) { if (e.target.tagName == 'BUTTON') { let li = e.target.parentNode; let prevLi = li.previousElementSibling; prevLi.className = 'highlight';

} });

app.js 
var list = document.getElementsByTagName('ul')[0];

list.addEventListener('click', function(e) {
  if (e.target.tagName == 'BUTTON') {
    let li = e.target.parentNode;
    let prevLi = li.previousElementSibling;
    prevLi.className = 'highlight';

  }
});
index.html 
<!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>
ygh5254e69hy5h545uj56592yh5j94595682hy95
ygh5254e69hy5h545uj56592yh5j94595682hy95
7,932 Points

if you look at the code here, this already selects the li element

var list = document.getElementsByTagName('ul')[0];

so you don't have to select it, go ahead and remove this from your code

let li = e.target.parentNode;

Now all you need to do is instead of using li.*****

li.previousElementSibling

// use e.target.****
e.target.previousElementSibling

2 Answers

ygh5254e69hy5h545uj56592yh5j94595682hy95
ygh5254e69hy5h545uj56592yh5j94595682hy95
7,932 Points

Final look:

var list = document.getElementsByTagName('ul')[0];

list.addEventListener('click', function(e) {
  if (e.target.tagName == 'BUTTON') {
    e.target.previousElementSibling.className = 'highlight';
  }
});
James Braun
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
James Braun
Full Stack JavaScript Techdegree Graduate 34,246 Points
James Braun
.a{fill-rule:evenodd;}techdegree seal-36
James Braun
Full Stack JavaScript Techdegree Graduate 34,246 Points

Where is your style sheet and what is the program not doing?

Muhammad Raza
Muhammad Raza
3,678 Points
Muhammad Raza
Muhammad Raza
3,678 Points

got the answer below thanks