Onmouseover not working in js file but working in html

Hi, I have a small problem, in the Portfolio project, I try to make this circle div bigger when the mouse is on it. This only works when I write a ‘mouseover’ in the HTML file like this:

<div class="circle-name" onmouseover = 'biggerCircle()' onmouseout = 'smallerCircle()'> <!-- like this is working --> <div class="name-and-text"> <h3>Evgeni Milev</h3> <div class="text-and-picture"> </div> <h4>Hi, I'm Evgeni and I am a student at codecademy. By profession I am a full-time CNC machine operator situated in Germany. In april 2021 I started the codecademy course - Full-Stack Engineer which I am currently completing on .... <br> <br> This page is still part of my training. I am open to further development in coding and web-development. </h4> </div> </div>

the js file look like this:

let targetCircle = document.querySelector('.circle-name'); function biggerCircle () { targetCircle.style.width = '40rem' targetCircle.style.height = '40rem' }; function smallerCircle () { targetCircle.style.width = '35rem' targetCircle.style.height = '35rem' };

The problem is that I want the ‘onmouseover’ and ‘onmouseout’ to be in all only in the JS file not in HTML also.

My question is why when I make it like this is not working:

let targetCircle = document.querySelector('.circle-name'); function biggerCircle () { targetCircle.style.width = '40rem' targetCircle.style.height = '40rem' }; function smallerCircle () { targetCircle.style.width = '35rem' targetCircle.style.height = '35rem' }; targetCircle.onmouseover = 'biggerCircle()' targetCircle.onmouseout = 'smallerCircle()'

I will be grateful for any explanation. The goal is to make the code more accessible and readable.

Hey there and welcome to the forums!

When you are calling the onmouseover and similar methods in Javascript there are two things to note. You must assign it in a function, even if you have already written a predefined function for it to work. Secondly, since it’s in Javascript, you don’t require the inverted commas '' around the function names. This is used in HTML to tell the parser what the actual property of the attribute is, but Javascript has no such requirement. At the moment instead of setting it to the function biggerCircle(), you’re setting it to the string biggerCircle(). Therefore the working code would be this.

targetCircle.onmouseover = function() {biggerCircle()}
targetCircle.onmouseout = function() {smallerCircle()}

Note how the function calls are no longer in inverted commas, and that the functions are inside another function. This is just one of the drawbacks of using these methods, and is why eventListeners are generally more recommended in projects these days, though you may not have encountered these yet so if not, don’t worry about that for now.

1 Like

Thank you very much Adam,
it works :partying_face:
I was stuck on this for a few days.

One more question, when I try eventListeners like this:

targetCircle.addEventListener = ('mouseover',biggerCircle);
targetCircle.addEventListener = ('mouseout', smallerCircle);

is not working :confused:

What am I missing ?

So addEventListener is a method, meaning that it needs to take arguments rather than an =. So for the event listener it should be

targetCircle.addEventListener('mouseover',biggerCircle);
targetCircle.addEventListener('mouseout', smallerCircle);

Thanks again, and it works again :slight_smile: .