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
Nas Jones
7,849 PointsButton not working
My snapshot isn't working it keeps telling me the snapshot doesn't exist so im going to copy and paste my code, everytime i click the down button nothing works.
listUl.addEventListener('click', (event) => {
if (event.target.tagName == 'BUTTON') {
if (event.target.className == 'remove') {
let li = event.target.parentNode;
let ul = li.parentNode;
ul.removeChild(li);
}
if (event.target.className == 'up') {
let li = event.target.parentNode;
let prevLi = li.previousElementSibling;
let ul = li.parentNode;
if(prevLi){
ul.insertBefore(li, prevLi);
}
if (event.target.className == 'down') {
let li = event.target.parentNode;
let nextLi = li.nextElementSibling;
let ul = li.parentNode;
if(nextLi) {
ul.insertBefore(nextLi, li);
}
}
}
});
<!DOCTYPE html>
<html>
<head>
<title>JavaScript and the DOM</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1 id="myHeading">JavaScript and the DOM</h1>
<p>Making a web page interactive</p>
<button id="toggleList">Hide List</button>
<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>
<input type="text" class="addItemInput">
<button class="addItemButton">Add Item</button>
</div>
<script src="app.js"></script>
</body>
</html>
Nas Jones
7,849 PointsI updated the HTML for it, there is more js if that would help you understand it more but I just used the js that the video wanted changing for. Also i checked in the console and the error was unexpected end of input which i dont know what that is
1 Answer
slc87
4,104 PointsHey there, Nas. Hope I can help.
It looks like the issue here is with the if statement for the up event. You're missing a closing curly brace which should be placed before you start the if statement for the down event.
if ( event.target.className == 'up' ){
let li = event.target.parentNode;
let prevLi = li.previousElementSibling;
let ul = li.parentNode;
if ( prevLi ) {
ul.insertBefore(li, prevLi);
}
}
Nas Jones
7,849 PointsHey thanks for helping, I placed the curly brace and it was still giving me an error. Here's my workspace https://w.trhou.se/nk3ssi9imq. They just fixed them not too long ago.
slc87
4,104 PointsIt looks like you were missing a closing parentheses on line 38 between the closing curly and the semi-colon. Once I added that it seemed to be working fine in-browser.
if (event.target.className == 'down') {
let li = event.target.parentNode;
let nextLi = li.nextElementSibling;
let ul = li.parentNode;
if(nextLi) {
ul.insertBefore(nextLi, li);
}
}
}
}); // added closing parentheses from line 14.
Nas Jones
7,849 PointsI saw your answer getting back to me on Tuesday just now and it fixed it, thank you for the help!
Rich Donnellan
Treehouse Moderator 27,671 PointsRich Donnellan
Treehouse Moderator 27,671 PointsCan you post the rest of the code (HTML)? It's hard to debug without the rest.
I updated with code formatting. Check out the Markdown Cheatsheet below the Add an Answer submission for syntax examples, or choose Edit Question from the three dots next to Add Comment to see how I improved the readability.