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) Responding to User Interaction Listening for Events with addEventListener()

Mirali Mirzayev
Mirali Mirzayev
1,980 Points

Add and Delete Buttons don't work?

``` const toggleList = document.getElementById('toggleList'); const listDiv = document.querySelector('.list'); const input = document.querySelector('input.description'); const p = document.querySelector('p.description'); const button = document.querySelector('button.description'); const addItemInput = document.querySelector('input.addItemInput'); const addItemButton = document.querySelector('input.addItemButton'); const removeItemButton = document.querySelector('input.removeItemButton'); const listItems = document.getElementsByTagName('li'); // Delete the square bracket : (1) for (let i=0; i<listItems.length; i++){ //Loop the whole thing in order to Hover on all item: Capitolize and DeCapitolize textContent

listItems[i].addEventListener('mouseover', () => { //Enters the item's text area + [ to access] : (2)
listItems[i].textContent = listItems[i].textContent.toUpperCase(); // And Capitolizes it + [ to access]: (3)
}); listItems[i].addEventListener('mouseout', () => { //Hovers away from the text area + [ to access]: (4)
listItems[i].textContent = listItems[i].textContent.toLowerCase(); // moves back to oorginal size + [ to access] : (5)
}); }

toggleList.addEventListener('click', ()=>{ if(listDiv.style.display=='none'){
toggleList.textContent='Hide List'; listDiv.sytle.display='block';
}else{ // 2 c toggleList.textContent='Show List'; listDiv.style.display='none'; }
});

button.addEventListener('click',()=> { p.innerHTML=input.value + ':';
Input.value = ' '; }); addItemButton.addEventListener('click',()=>{ let ul = document.getElementsByTagName('ul')[0]; let li = document.createElement('li'); li.textContent = addItemInput.value; ul.appendChild('li'); // addItemInput.value = ' ';

}); removeItemButton.addEventListener('click',()=>{ let ul = document.getElementsByTagName('ul')[0]; // let li = document.querySelector('list:last-child');

ul.removeChild('li'); // removeItemInput.value = ' '

});

The add and the delete buttons on this has not been working. Everything is done exactly the same instructor has but for some reason letters change when i hover over them and out but i can't add or delete new items. Please show me what i am doing wrong.

Thank you!!!!!!

3 Answers

Tiago Fernandes
Tiago Fernandes
3,647 Points

Hi Mirali Mirzayev

Your code:

toggleList.addEventListener('click', ()=>{ 
if(listDiv.style.display=='none'){
toggleList.textContent='Hide List'; 
listDiv.sytle.display='block';
}else{ // 2 c toggleList.textContent='Show List'; listDiv.style.display='none'; }
});

The code contains a spelling error:

listDiv.sytle.display='block';  

should be called:

listDiv.style.display = 'block';

I hope I could help you.

If you have further problems contact me :)

regards Tiago

Tiago Fernandes
Tiago Fernandes
3,647 Points

Mirali can you link your Workspace?

Mirali Mirzayev
Mirali Mirzayev
1,980 Points

Thank you Tiago, however add and remove button still doesn't work: