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 Solution: Using nextElementSibling

Posted by ac10
ac10
12,799 Points

What is the point of "if (nextLi)"?

I did it without the extra if statement, and my code worked just fine.

    if (e.target.className == 'move-down') {
      let li = e.target.parentNode;  
      let nextLi = li.nextElementSibling;
      let ul = li.parentNode;
      ul.insertBefore(nextLi, li);
    }

Even when you click the "down" button next to the final list item, it doesn't move, as expected.

1 Answer

Steven Parker
Steven Parker
231,271 Points
Steven Parker
Steven Parker
231,271 Points

Without it your script will be causing errors.

Obviously, the final item cannot move down, because there's no lower spot to go to. But by removing the test, your code will attempt to move it and will fail and cause errors.

Try opening the console in your browser's developer tools and watch while you click the down button.

There may be no behavioral difference in your current browser, but a different one (or a future version) might permanently deactivate an event handler that causes errors.

ywang04
ywang04
6,762 Points
ywang04
ywang04
6,762 Points

You're right. :) Below is the error without if statement.

app.js:30 Uncaught TypeError: Failed to execute 'insertBefore' on 'Node': parameter 1 is not of type 'Node'.
    at HTMLUListElement.listUl.addEventListener (app.js:30)