dom traversal

Question

help me solve below exercise

https://teamtreehouse.com/library/javascript-and-the-dom-2/traversing-the-dom/sibling-traversal

app.js

var list = document.getElementsByTagName('ul')[0];
list.addEventListener('click', function(e) {
  if (e.target.tagName == 'BUTTON') {
    let highlight=e.target;
    let p=highlight.previousElementSibling;
   let ul=highlight.parentNode;
  ul.insertBefore(highlight,p)
  }
});

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>

Answer 1 · 2020-05-26T08:50:45Z

May 26, 2020 8:50am

Hello,

In this challenge the point is to target paragraphs which are (in HTML) BEFORE buttons, that's why question suggests you to use immediate previous sibling.

The answer is simple as that:

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

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

On a purpose I didn't create any variable so you can see how I've aimed specified paragraph (targeted button previous element)

Hope it helps!

Welcome to the Treehouse Community

Looking to learn something new?

musab abdi

musab abdi

dom traversal

1 Answer

Grzegorz Zielinski

Grzegorz Zielinski