Use multiple Event Handlers for multiple elements in a forEach loop in Javascript-CodePudding

I want to add multiple event handlers on multiple HTML elements with the same class. I am using a forEach loop to achieve this. But for some reason it doesn't work as it should. The first time I had a function to do this. I have multiple of images with the same class so I want to use a forEach loop to able to do an event at once. It's otherwise really annoying to type the same thing everytime.

This is before:

HTML

<img src="image.png"  onm ouseOver="changeToGif(this);" onm ouseOut="changeToImg(this);">
<img src="image.png"  onm ouseOver="changeToGif(this);" onm ouseOut="changeToImg(this);">
<img src="image.png"  onm ouseOver="changeToGif(this);" onm ouseOut="changeToImg(this);">

<script type="text/javascript" src="script.js"></script>

Javascript

function changeToGif(x){
 x.src = "gif.gif";
}

function changeToImg(x){
 x.src = "image.png";
}

This is after:

HTML

<img src="image.png" >
<img src="image.png" >
<img src="image.png" >

<script type="text/javascript" src="script.js"></script>

Javascript

let gifs = document.querySelectorAll(".changeImg");

gifs.forEach(gif => {
    gif.addEventListener("mouseover", () => {
      this.src = "gif.gif";
    });
    gif.addEventListener("mouseout", () => {
      this.src = "image.png";
    });
});

SNIPPET:

let gifs = document.querySelectorAll(".changeImg");

gifs.forEach(gif => {
    gif.addEventListener("mouseover", () => {
      this.src = "https://gifimage.net/wp-content/uploads/2017/08/tree-gif.gif";
    });
    gif.addEventListener("mouseout", () => {
      this.src = "https://cdn.pixabay.com/photo/2018/05/31/10/03/big-tree-3443533_640.jpg";
    });
});

<img src="https://cdn.pixabay.com/photo/2018/05/31/10/03/big-tree-3443533_640.jpg" >
<img src="https://cdn.pixabay.com/photo/2018/05/31/10/03/big-tree-3443533_640.jpg" >
<img src="https://cdn.pixabay.com/photo/2018/05/31/10/03/big-tree-3443533_640.jpg" >

<script type="text/javascript" src="script.js"></script>

Why is this not working? It seems like I'm still missing something in the code. But I don't know what exactly what.

CodePudding user response：

The problem were :

moveover instead of mouseover
this instead of gif in forech loop

let gifs = document.querySelectorAll(".changeImg");

gifs.forEach(gif => {
  gif.addEventListener("mouseover", () => {
    gif.src = "https://gifimage.net/wp-content/uploads/2017/08/tree-gif.gif";
  });
  gif.addEventListener("mouseout", () => {
    gif.src = "https://cdn.pixabay.com/photo/2018/05/31/10/03/big-tree-3443533_640.jpg";
  });
});

.changeImg {
  width:100px;
  height:100px
}

<img src="https://cdn.pixabay.com/photo/2018/05/31/10/03/big-tree-3443533_640.jpg" >
<img src="https://cdn.pixabay.com/photo/2018/05/31/10/03/big-tree-3443533_640.jpg" >
<img src="https://cdn.pixabay.com/photo/2018/05/31/10/03/big-tree-3443533_640.jpg" >

CodePudding user response：

you are using arrow function Arrow functions do not bind their own this, instead, they inherit the one from the parent scope, which is called "lexical scoping". in your case this belong to global scope and there is no this.src prop in this so convert it to normal function.

let gifs = document.querySelectorAll(".changeImg");

gifs.forEach(gif => {
    gif.addEventListener("mouseover", function (e) {
      this.src = "https://gifimage.net/wp-content/uploads/2017/08/tree-gif.gif";
    });
    gif.addEventListener("mouseout", function (e) {
      this.src = "https://cdn.pixabay.com/photo/2018/05/31/10/03/big-tree-3443533_640.jpg";
    });
});

<img src="https://cdn.pixabay.com/photo/2018/05/31/10/03/big-tree-3443533_640.jpg"   width="20%" height="20%">
<img src="https://cdn.pixabay.com/photo/2018/05/31/10/03/big-tree-3443533_640.jpg"   width="20%" height="20%">
<img src="https://cdn.pixabay.com/photo/2018/05/31/10/03/big-tree-3443533_640.jpg"   width="20%" height="20%">

CodePudding user response：

In case there are multiple images not just one, use data attribute to toggle between gif and image

let imgs = [...document.querySelectorAll(".changeImg")];
imgs.forEach((img) => {
  img.onmouseover = function () {
    temp = this.src;
    this.src = this.dataset.toggle;
    this.dataset.toggle = temp;
  };
  img.onmouseout = function () {
    temp = this.src;
    this.src = this.dataset.toggle;
    this.dataset.toggle = temp;
  };
});

img {
  width: 100px;
  height: 100px;
  cursor:pointer;
}

<img  src="https://i.stack.imgur.com/CtECC.jpg" data-toggle="https://i.stack.imgur.com/ZCkqa.gif"/>
<img  src="https://i.stack.imgur.com/zLhl9.jpg" data-toggle="https://i.stack.imgur.com/E2wFD.gif"/>