JavaScript JavaScript and the DOM Responding to User Interaction The Event Object

Ryan Lang
Ryan Lang
2,226 Points

Code Not Working

I copied what the video said to do, and have spent a lot of time dissecting the video to see what went wrong, and everything looks the same... Please Help.

Here is my Code:

const toggleList = document.getElementById('toggleList'); const listDiv = document.querySelector('.list'); const descriptionInput = document.querySelector('input.description'); const descriptionP = document.querySelector('p.description'); const descriptionButton = document.querySelector('button.description'); const addItemInput = document.querySelector('input.addItemInput'); const addItemButton = document.querySelector('button.addItemButton'); const removeItemButton = document.querySelector('button.removeItemButton');

listDiv.addEventListener('mouseover', (event) => { if (event.target.tagName == 'LI') { event.target.textContent = event.target.textContent.toUpperCase(); });

listDiv.addEventListener('mouseout', (event) => { if (event.target.tagName == 'LI') { event.target.textContent = event.target.textContent.toLowerCase(); });

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; ul.appendChild(li); addItemInput.value = ''; });

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

Grigorij Schleifer
Grigorij Schleifer
10,352 Points

Hey, try to add this } at the end of your code. I hope that helps.

Ryan Lang
Ryan Lang
2,226 Points

Thanks Grigorji!

1 Answer

KRIS NIKOLAISEN
KRIS NIKOLAISEN
52,797 Points

You are missing a closing bracket for each listDiv.addEventListener() function. You have one for the if statement but not the function.

listDiv.addEventListener('mouseover', (event) => {
  if (event.target.tagName == 'LI') {
    event.target.textContent = event.target.textContent.toUpperCase(); 
  }
} //missing
);

listDiv.addEventListener('mouseout', (event) => {
  if (event.target.tagName == 'LI') {
    event.target.textContent = event.target.textContent.toLowerCase(); 
  }
} //missing
);
Ryan Lang
Ryan Lang
2,226 Points

Thanks so much, I don't now how I missed this.