JavaScript JavaScript and the DOM 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

Mirali Mirzayev
Mirali Mirzayev
1,980 Points

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

Tiago Fernandes
Tiago Fernandes
3,647 Points

Mirali can you link your Workspace?