Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript JavaScript and the DOM (Retiring) Traversing the DOM Sibling Traversal

I am not sure if I know what they want from me. Do they want me to change class name of the <p> to highlight?

If yes, which method of targeting a <button> element would be best?

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

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

4 Answers

ok, I got it. I made it too complicated. This would do, I guess:

var p = e.target.previousElementSibling;
p.className = 'highlight';

Louise St. Germain
Louise St. Germain
19,412 Points

Yes, the simple solution works! :-)

In fact, you could simplify two lines into one, like this:

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

list.addEventListener('click', function(e) {
  if (e.target.tagName == 'BUTTON') {
     // Combine the two lines into one step
     e.target.previousElementSibling.className = 'highlight';    
  }
});
Louise St. Germain
Louise St. Germain
19,412 Points

Hi Piotr,

Yes, they are looking for you to change the class name of the p to "highlight", but only for the p that is right before the button that got clicked.

You have the right idea to use previousElementSibling to find the p, but you will need to do that inside the event listener. If you do it before (as in your code above), it selects a p before you've even clicked a button, which is not what we want.

So, your code should be something like:

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

list.addEventListener('click', function(e) {
  if (e.target.tagName == 'BUTTON') {
     // TODO: Find e.target's previousElementSibling (which should be a p)
     // TODO: Set that element's class name to "highlight".
  }
});

I hope this helps to clarify!

assuming I selected correctly <p>, is the command below a correct way to change paragraph's class?

p.className = 'highlight';

What do you think about this:

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

list.addEventListener('click', function(e) {
  if (e.target.tagName == 'BUTTON') {
    var li = e.target.parentNode;
    var button = document.getElementsByTagName('button');
    var p = button.previousElementSibiling;
    p.className = 'highlight';
  }
});

MOD: Just reformatted so the code is easier to read!

You're right. This is even better.