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
James Barshaw
4,167 Pointshow come my buttons don't work
I tried copying and pasting someone elses code and my own code and my buttons still don't work. I tried checking the console for mistakes and found none. nothing I try seems to get my buttons to work and my code looks good as far as I can see
const toggleList = document.getElementById('toggleList');
const listDiv = document.querySelector('div.list');
const descriptionInput = document.querySelector('input.description');
const descriptionP = document.querySelector('p.description');
const descriptionButton = document.querySelector('button.description');
const listUl = listDiv.querySelector('ul');
const addItemInput = document.querySelector('input.addItemInput');
const addItemButton = document.querySelector('button.addItemButton');
const lis = listUl.children;
function attachListItemButtons(li) {
let up = document.createElement('button')
up.ClassName = 'up';
up.textContent = 'up';
li.appendChild(up);
let down = document.createElement('button')
down.ClassName = 'down';
down.textContent = 'down';
li.appendChild(down);
let remove = document.createElement('button')
remove.ClassName = 'remove';
remove.textContent = 'remove';
li.appendChild(remove);
}
for (let i = 0; i < lis.length; i += 1){
attachListItemButtons(lis[i]);
}
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); //parent, sibling, reference
};
}
if (event.target.className == 'down'){
let li = event.target.parentNode;
let nextLi = li.nextElementSibling;
let ul = li.parentNode;
if (nextLi){
ul.insertBefore(nextLi, li); //parent, sibling, reference
}
}
}
});
toggleList.addEventListener('click', () => {
if (listDiv.style.display == 'none') {
toggleList.textContent = 'Hide list';
listDiv.style.display = 'block';
} else {
toggleList.textContent = 'Show list';
listDiv.style.display = 'none';
}
});
descriptionButton.addEventListener('click', () => {
descriptionP.innerHTML = descriptionInput.value + ':';
descriptionInput.value = '';
});
addItemButton.addEventListener('click', () => {
let ul = document.getElementsByTagName('ul')[0];
let li = document.createElement('li');
li.textContent = addItemInput.value;
attachListItemButtons(li);
ul.appendChild(li);
addItemInput.value = '';
});
edited to add Markdown
James Barshaw
4,167 PointsI don't know how this is supposed to help but here you go
```const toggleList = document.getElementById('toggleList'); const listDiv = document.querySelector('div.list'); const descriptionInput = document.querySelector('input.description'); const descriptionP = document.querySelector('p.description'); const descriptionButton = document.querySelector('button.description'); const listUl = listDiv.querySelector('ul'); const addItemInput = document.querySelector('input.addItemInput'); const addItemButton = document.querySelector('button.addItemButton'); const lis = listUl.children;
function attachListItemButtons(li) { let up = document.createElement('button') up.ClassName = 'up'; up.textContent = 'up'; li.appendChild(up);
let down = document.createElement('button') down.ClassName = 'down'; down.textContent = 'down'; li.appendChild(down);
let remove = document.createElement('button') remove.ClassName = 'remove'; remove.textContent = 'remove'; li.appendChild(remove); }
for (let i = 0; i < lis.length; i += 1){ attachListItemButtons(lis[i]); }
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); //parent, sibling, reference
};
}
if (event.target.className == 'down'){
let li = event.target.parentNode;
let nextLi = li.nextElementSibling;
let ul = li.parentNode;
if (nextLi){
ul.insertBefore(nextLi, li); //parent, sibling, reference
}
}
}
});
toggleList.addEventListener('click', () => {
if (listDiv.style.display == 'none') {
toggleList.textContent = 'Hide list';
listDiv.style.display = 'block';
} else {
toggleList.textContent = 'Show list';
listDiv.style.display = 'none';
}
});
descriptionButton.addEventListener('click', () => {
descriptionP.innerHTML = descriptionInput.value + ':';
descriptionInput.value = '';
});
addItemButton.addEventListener('click', () => { let ul = document.getElementsByTagName('ul')[0]; let li = document.createElement('li'); li.textContent = addItemInput.value; attachListItemButtons(li); ul.appendChild(li); addItemInput.value = ''; });```
Zaid Khan
12,769 PointsThank you, your original edit is what I was talking about.
1 Answer
Zaid Khan
12,769 PointsYou have used ClassName instead of className in function attachListItemButtons that's why your up, down, and remove button are not working.
Zaid Khan
12,769 PointsZaid Khan
12,769 PointsHi James, For better readability of code, wrap your code around 3 backticks on the line before and after.