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

Brian Patterson
Brian Patterson
19,585 Points

Why is this not working?

I don't know why this is not working?

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();
  }
});

Also, I don't understand why he has put 'LI' ? This is very confusing and I don't understand.

2 Answers

Steven Parker
Steven Parker
180,121 Points

Since these are delegated handlers, the event could come from any contained element. The test for "LI" confirms that the element generating the event is a list item.

And both of those "if" tests for "LI" seem to be missing the closing parentheses of the conditional expression.

Brian Patterson
Brian Patterson
19,585 Points

I am still confused! Where is 'LI' ? Where has it come from? These videos have not explained this very well.

Steven Parker
Steven Parker
180,121 Points

The 'LI' refers to the tag name of the elements in the HTML that will be marked "<li>". Those are list items, and are the ones that this code wants to react to the mouse passing over (or away from).

Steven Parker
Steven Parker
180,121 Points

It's in capitals so it will match. On HTML elements, the tagName property always returns the element name in the uppercase form.!

Brian Patterson
Brian Patterson
19,585 Points

Do you mean this "In XML (and XML-based languages such as XHTML), tagName preserves case. On HTML elements in DOM trees flagged as HTML documents, tagName returns the element name in the uppercase form. The value of tagName is the same as that of nodeName."

Steven Parker
Steven Parker
180,121 Points

That's the full technical explanation. But since we're using HTML here, I only mentioned the part that applies to this code.

Uche Onuekwusi
Uche Onuekwusi
13,741 Points

The code is not working because of the syntax errors in the if statements. There are missing bracket closes in the if statements. here is the complete code 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(); } });

Steven Parker
Steven Parker
180,121 Points

Brian Patterson — Isn't that exactly what I said back in October?