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

Yanis Lebzar
Yanis Lebzar
2,472 Points
Posted by Yanis Lebzar
Yanis Lebzar
2,472 Points

What am I supposed to do ?

Hi, i think i didn't understand the question, i tried many things and re watched videos but i can't understand either.. I'm glad if someone can help me ! thanks

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

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

    let pC = p.className="highlight";
    let prevP = pC.previousElementSibling;
let ul = p.parentNode;
    ul.insertBefore(p, prevP.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

ygh5254e69hy5h545uj56592yh5j94595682hy95
ygh5254e69hy5h545uj56592yh5j94595682hy95
7,934 Points
ygh5254e69hy5h545uj56592yh5j94595682hy95
ygh5254e69hy5h545uj56592yh5j94595682hy95
7,934 Points 
// I found couple of issue with your code
var list = document.getElementsByTagName('ul')[0];

list.addEventListener('click', function(e) {
  if (e.target.tagName == 'BUTTON') {
    // The following line does select the p tag because
    // p tag is the parentNode of button tag
    // but they asked for the previousElementSibling
    let p = e.target.parentNode;

    // pC variable here does help assign the p tag className to 'highlight'
    // but it does not actually target anything, if you console.log(pC)
    // it returns 'highlight'
    // so the prevP variable is useless in this case
    let pC = p.className="highlight";
    // prevP here returns undefined because 'highlight'.previousElementSibling does not target anything
    let prevP = pC.previousElementSibling;
    // for this scenario the following 2 lines of code are not necessary
    let ul = p.parentNode;
    ul.insertBefore(p, prevP.className="highlight")
  }
});


// Here is a working code
var list = document.getElementsByTagName('ul')[0];

list.addEventListener('click', function(e) {
  if (e.target.tagName == 'BUTTON') {
    // we simply target the previousElementSibling from the e.target
    // which will be the <p> tag
    let p = e.target.previousElementSibling;

    // and then we just assign the className to 'highlight'
    p.className="highlight";

  }
});

// Hopefully this helps you, please compare your code with mine.