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 trialVICTORIA DENNIS
Full Stack JavaScript Techdegree Student 3,679 PointsWhy does insertBefore not work when put in the if statement?
I looked over my code a dozen time. Redid it to match the video. if (prevLi) {
ul.insertBefore(li, prevLi);
}
The Up Buttons work when I only have
ul.insertBefore(li, prevLi);
```
But when I add the rest of it, all the Up buttons stop working and the remove one still works. I was coding in VSC and thought it might be that but even in Workspace it's wrong. I just can't seem to see it. Clearly there's an issue with the first part of the event listener, but I'll include the whole one, in case. Thanks.
const listDiv = document.querySelector('.list'); const listUl = listDiv.querySelector('ul');
listUl.addEventListener('click', (event) => {
if (event.target.tagName == 'BUTTON'){
if (event.target.className == 'up'){
let li = event.target.parentNode;
let prevLi = li.previousElementSilbing;
let ul = li.parentNode;
if (prevLi) {
ul.insertBefore(li, prevLi);
}
}
if (event.target.className == 'remove'){
let li = event.target.parentNode;
let ul = li.parentNode;
ul.removeChild(li);
}
} });```
Related HTML ``` <div class = "list"> <p class = "description">Things that are purple:</p>
<input type = "text" class = "description">
<button class = "description">Change List Description </button>
<ul>
<li>grapes <button class = "up">Up</button>
<button class = "down">Down</button>
<button class = "remove">Remove</button>
</li>
<li>amethyst <button class = "up">Up</button>
<button class = "down">Down</button>
<button class = "remove">Remove</button>
</li>
<li>lavender <button class = "up">Up</button>
<button class = "down">Down</button>
<button class = "remove">Remove</button>
</li>
<li>plums<button class = "up">Up</button>
<button class = "down">Down</button>
<button class = "remove">Remove</button>
</li>
</ul>
2 Answers
Courtney Wilson
8,031 PointsThis was really bugging me because your code looks exactly like mine. I couldn't figure out what was wrong. I ran yours in my workspace, did a few console logs and found that your prevLi is returning null. I closely inspected the prevLi line and found "Sibling" misspelled. You have 'previousElementSilbing' when it should be previousElementSibling. Simple mistake we've all made :) Hope this helps.
Thomas Scott
7,682 Pointshahahaahhahahaahhahahaahhahahaahhahahaahhahahaahhahahaahhahahaahhahahaahhahahaah I HAD THE EXACT SAME PROBLEM HOLY MOLY
VICTORIA DENNIS
Full Stack JavaScript Techdegree Student 3,679 PointsVICTORIA DENNIS
Full Stack JavaScript Techdegree Student 3,679 PointsAlso, the last list item's Up Button, when the if-statement is omitted, does not shift the list at all. The top goes to the button like the video. But the bottom does not move anything, which is not what happened in the video