JavaScript JavaScript and the DOM Traversing the DOM Sibling Traversal

musab abdi
musab abdi
4,140 Points

dom traversal

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>

1 Answer

Grzegorz Zielinski
Grzegorz Zielinski
5,838 Points

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!