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

I do not understand this exercise question.. Please help!

i don't even know where to start

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>

3 Answers

         e.target.previousElementSibling.className = "highlight";  // ideal answer
         e.target.previousElementSibling.classList.add("highlight"); // alternative answer

Thank you, but i don't understand how you figured out to add in their "classList.add". There was no variable declared in the beginning for classList and i didn't see this taught in the instructors series of lessons. He taught the previousElementSibling but the teacher jumps around and confuses me. Can you help me understand this logic please?

Antonio De Rose
Antonio De Rose
20,885 Points

if you aren't able to understand, on how this is retreived

e.target.previousElementSibling.classList.add("highlight");

I'd suggest, you to go through the videos over and over, the course for Javascript and the DOM by Guil, is one of the best course to get a good solid hang of what is JavaScript, and to understand how to and when to use it.

make sure, you get the maximum out of the developer tools in google chrome make sure you put a lot of console.log's in your javascript code, to do a lot of debugging.

for example save the html file like in a file, then open the file in google chrome

<!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></script>
    </body>
</html>

then hit F12, or right click in the html explore page, inspect element, go to the console section code paste the following const list = document.getElementsByTagName('ul')[0]; then in the second line write a console.log(list) and enter to see what is it returning, then find out why TagName is having a array and, why elementById is not having an array

then save the same HTML file again, with the addition of the code in the script section, explore the page, make sure, you open developer tools, and console section, to see what it is returning console.log in the following code.

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

    list.addEventListener('click', function(e) {
      if (e.target.tagName == 'BUTTON') {
            console.log(e.target.innerHTML);
            console.log(e.target)
                            console.log(e.target.tagName)
      }
    });

You need to add the class "highlight" to the <p> using the "previousElementSibling" property of the clicked button .

i add the class highlight by doing p.className?