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

Scott Wells
Scott Wells
8,715 Points
Posted by Scott Wells
Scott Wells
8,715 Points

I'm completely lost here. I know I need to create an attribute for the <p> element via Javascript '[class=highlight]'.

I need to create an attribute for the <p> element via Javascript '[class=highlight]'. This attribute needs to be applied to a sibling element when a button is clicked.

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

list.addEventListener('click', function(e) {
  if (e.target.tagName == 'BUTTON') {

  }
});
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>

1 Answer

Milan Pankhania
Milan Pankhania
3,734 Points
Milan Pankhania
Milan Pankhania
3,734 Points

Hi Scott, there are many ways of doing this, below is just one of the ways:

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

list.addEventListener('click', function(e) {
  if (e.target.tagName == 'BUTTON') {

    // code
    e.target.previousElementSibling.className = 'highlight';

  }
});

To explain the above example, "e.target" will give you the element you clicked on, "previousElementSibling" will select the paragraph as that is the sibling element just before the clicked button, "className" is the property that lets you add the class.

Hope that helps!

Scott Wells
Scott Wells
8,715 Points
Scott Wells
Scott Wells
8,715 Points

Thank you! I was making it way more complicated.