JavaScript JavaScript and the DOM Responding to User Interaction Listening for Events with addEventListener()

Colin Sandlin
Colin Sandlin
4,507 Points

Can you please redo this entire section without using callback/arrow functions?

Not necessary and makes it 1000x more confusing for people just jumping into the JS world.

Eric Butler
Eric Butler
31,934 Points

FYI, addEventListener requires a callback function to work, so that has to stay. But you have a point, you could write the function in traditional JS instead of the new arrow function syntax. Just real quick so you can keep progressing, here's what that would look like:

listItems[i].addEventListener('mouseover', function() {
  listItems[i].textContent = listItems[i].textContent.toUpperCase(); // this would be the exact same
});

You'd literally just be changing () => to function(). And while I dislike the new arrow syntax too and think it's harder to understand, it's better that you're learning that first because honestly, it's not going back to the old way, ever. JS is moving rocket-speed toward this new syntax.

Colin Sandlin
Colin Sandlin
4,507 Points

Cool, thanks Eric. That was helpful. For some reason I thought arrow syntax was more complex than just replacing the "function()" item.

Eric Butler
Eric Butler
31,934 Points

Arrow syntax can get more complex/different looking, like when you start adding arguments and removing parentheses and curly braces, but this example/lesson is the simplest it gets so that's all the difference there is.