JavaScript JavaScript and the DOM Traversing the DOM Sibling Traversal

Lauren Cameron
Lauren Cameron
6,053 Points

Trouble getting around...

I am having trouble reaching the correct elements to highlight. I have only been able to highlight the title of the list. Please help.

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

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

1 Answer

Gabriel Pierce-Lackey
MOD
Gabriel Pierce-Lackey
Treehouse Moderator 10,987 Points

We're going to need to break it down a little more. You are very close though. we are going to want to set another variable, li as the target previous sibling. instead of the list previous sibling class. After that we can use Element.className to give it the class name of highlighted.

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

list.addEventListener('click', function(e) {
  if (e.target.tagName == 'BUTTON') {
    let li = e.target.previousSibling
    li.className = "highlight";
  }
});
Lauren Cameron
Lauren Cameron
6,053 Points

Thank you for your help! I was trying parent and child also... Thanks! I will study the .target property some more.