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

Posted by rajdeepbrar
rajdeepbrar
3,006 Points

Practical Help

Why doesn't this work? This question is stumping me big time!

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

list.addEventListener('click', function(e) { if (e.target.tagName == 'BUTTON') { let butt = e.target.parentNode; let p = butt.previousElementSibling; p.className = "highlight"; } });

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

list.addEventListener('click', function(e) {
  if (e.target.tagName == 'BUTTON') {
      let butt = e.target.parentNode;
      let p = butt.previousElementSibling;
      p.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>

2 Answers

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

:point_right: You seem to be trying to target the wrong element.

The paragraph that you want to alter is the previous sibling of the button itself, but your code seems to be attempting to target the previous sibling of the button's parent.

Your code:

      let butt = e.target.parentNode;  // but the parent of the target is the <li>!

Corrected code:

      let butt = e.target;    // the event target *IS* the button
rajdeepbrar
rajdeepbrar
3,006 Points

I've tried so many things, I see what you are saying.

I just can't solve this, let me try something else and report back.

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

Just change the one line I show above.

rajdeepbrar
rajdeepbrar
3,006 Points

Thanks Steve!!

rajdeepbrar
rajdeepbrar
3,006 Points
rajdeepbrar
rajdeepbrar
3,006 Points

I've also tried this:

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

list.addEventListener('click', function(e) {
  if (e.target.tagName == 'BUTTON') {
      let p = e.previousElementSibling;
      p.className = "highlight";
  }
});

But get error: There was an error with your code: TypeError: 'undefined' is not an object (evaluating 'p.className = "highlight"')

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

An event object (e) has no previousElementSibling property.