I have this code in javascript to change the product image on mouse over. It is working fine, but only for two first products. Last one is being ignored.
```
var list = document.querySelectorAll('span[data-oe-id] img');
for(let i=0; i<list.length; i++){
let image = list[i];
let src = image.src;
image.addEventListener("mouseover",function(event){
console.log(src);
image.src="https://media1.giphy.com/media/PfFtibPKBbQrK/giphy.gif?cid=ecf05e47b668e5062e9a561e681f23705e106d8d495b3915&rid=giphy.gif";
});
image.addEventListener("mouseout",function(event){
image.src=src;
});
}
Here is the video example of issue - https://mega.nz/file/aRUziACJ#bwTlV1wWd_P3kyqYARikyJC-o8hVszJikE_NDaM-jkw
I can't see why it is ignoring the last product, because it has the same HTML code structure as first two products
Resulting HTML code in the shop. My script is - mainimg.js (Yea. I know that js is loaded 3 times, just couldn't find way to load it once): https://pastebin.com/KPFuGnWA
Speaking about my templates code, there's nothing special, just an xpath for card and oe_product_cart classes