Why don't simple things work in JavaScript?

 <img src="img/team-3.jpg" alt="" id="foto">
document.getElementById("foto").addEventListener("mouseover",function(){
    document.getElementById("foto").src="img/team-3.jpg"

   document.getElementById("foto").addEventListener("mouseout",function(){
    document.getElementById("foto").src="img/frog.png" 
})

})

I can’t do it in this language. Why is this so difficult, but not popular? Of course, everything is easy to do in styles, but there are many people with this question who do not understand, including me, how to do this in JavaScript, so that the picture changes and that’s it))))

Well it does work, or it does exactly what I would expect it to do.
Perhaps you were expecting it to do something else.

doesn’t work, when you remove the mouse, the photo should change, but here it disappears

Your code is doing exactly what you asked of it,

On mouseover it applies the team3.jpg (which is the same as the original image so there is no change initially).

On mouseout you swap it for a different frog image.

Then when you mouseover again it will change back to the original image and so on. Here it is working in a codepen with the only difference being the image urls.

If that isn’t happening for you then you have a missing frog image most likely.

Although I would also tidy the code up a bit like this.

Thank you, I understood the rest.

What are you trying to do exactly?

Usually you would set the size in CSS for a responsive layout.

Are you trying to make 2 different sized images the same size? You would need to use object-fit to retain the aspect ratio but that would result in a crop for different aspect ratio images.

There are so many variables here you need to explain more clearly the requirements and what you want or expect to happen.?

1 Like