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
Shung Chen
6,526 PointsBug on () and {}
Tried to fix the disabled part but won't work
const toggleList = document.getElementById('toggleList');
const listDiv = document.querySelector('.list');
const input = document.querySelector('input');
const descriptionP = document.querySelector('p.description');
const descriptionButton = document.querySelector('button.description');
const addItemInput = document.querySelector('input.addItemInput');
const addItemButton = document.querySelector('button.addItemButton');
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 = `${input.value} :`;
//}); This Part of the code is not closing properly, if this is enabled the part after it is not functioning properly
addItemButton.addEventListener( 'click', () => {
let li = document.createElement('li');
li.textContent = addItemInput.value;
});
1 Answer
Brandon White
Full Stack JavaScript Techdegree Graduate 34,662 PointsHi Shung Chen,
Great job getting started. The issue with your code is not due to the disabled part though.
The reason that clicking the "Add Item" button doesn't add the item to the DOM is because the code hasn't told it to yet. Right now in your addItemButton.addEventListener function, you've told the JS interpreter to create a list element and assign it a value, but in order for it to show on the DOM (in the user's screen), you have to tell the interpreter to grab the ul element that's holding all of the current list items, and append the list element you've created to it.
The code that you've disabled actually is closing properly, you just can't tell because the workspace code editor doesn't seem to have syntax highlighting that properly supports es6. It doesn't seem to understand the back tics that are used to initiate template strings, and so the code after it doesn't show the colors one would expect. That said, the browser's JS interpreter understands this and is processing your code correctly.
Just make sure you append your list element to the ul element already in the DOM, and you'll be all set.
Just shout if you need any more help, or a more thorough explanation of this issue you're seeing.