FAQ: DOM Events with JavaScript - Mouse Events

This community-built FAQ covers the “Mouse Events” exercise from the lesson “DOM Events with JavaScript”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Web Development

FAQs on the exercise Mouse Events

There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply (reply) below.

If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

Hi there.

I’ve fallen at the first hurdle here.
Question one.

What am I doing wrong?

// These variables store the boxes on the side
let itemOne = document.getElementById('list-item-one');
let itemTwo = document.getElementById('list-item-two');
let itemThree = document.getElementById('list-item-three');
let itemFour = document.getElementById('list-item-four');
let itemFive = document.getElementById('list-item-five');
let resetButton = document.getElementById('reset-button');

// This function programs the "Reset" button to return the boxes to their default styles
let reset = function() {
  itemOne.style.width = ''
  itemTwo .style.backgroundColor = ''
  itemThree.innerHTML = 'The mouse must leave the box to change the text'
  itemFive.hidden = true;
resetButton.onclick = reset;

// Write code for the first list item

// Write code for the second list item

// Write code for the third list item

// Write code for the fourth list item

1 Like

Referring to Exercise #3, an event handler property consists of:

  • the event target (e.g. itemOne)
  • followed by the event name; i.e. the event type with the prefix ‘on’ (e.g. onmouseover)
1 Like

Hi Team,

I keep getting itemOne is not defined error. This is for the second question in the exercise to:

Now, assign an anonymous event handler function that changes the width of itemOne to any size greater or less than 400px .

My code is here:
let itemOne = document.getElementById(‘list-item-one’); (provided by the course).

itemOne.onmouseover = function() {
itemOne.style.width > “400px”

Any ideas why team?

Figured it out - set it exactly to equal another value literally (500px ) or 300px.

Does anyone know there is a better way to code this? or do we have to be explicit in events to exact sizes?

1 Like

same here what gives?

got it now… it has to be itemOne.onmouseover

so it has to be onmouseover instead of mouseover?

Yes, its always with “on” in the beginning, however in the Documentation its without.
Any clue why?

I first had issues when trying the “mouseover” and noticed you had to use ONmouseover when doing the itemOne.onmouseover; , but then i had som issues with step 2. I noticed though that it works fine when using the addEventListener. So if you are having issues, try to use itemOne.addEventListener(‘mouseover’, function() {});
And notice that when using the addEventListener you are NOT using ONmouseover, but only mouseover.