Création d'une variable javascript qui ajoute 1 lorsqu'un événement se produit

Question

Contexte: J'aide mon ami à créer un site Web de type blague politique.

J'en ai besoin pour ajouter 1 à une variable chaque fois que l'événement onmouseover est déclenché.

<img src="tm.png" onmouseover='this.src="jc.png"'>

J'ai ce jusqu'à présent, mais je dois trouver un moyen de relier avec une fonction qui ajoutera 1 à lui-même lorsque cet événement se produit. J'ai plusieurs événements onmouseover autour de la page, donc j'ai besoin de travailler pour eux tous. Je sais comment faire la variable, mais je ne sais pas comment ajouter 1 chaque fois que l'événement onmouseover se produit, je ne suis pas sûr non plus sur la façon d'ajouter la fonction à l'événement onmouseover. Merci

Answer 1

hoverCounter = 0;

<img src="http://www.darbsterkitty.com/uploads/5/5/5/6/55568079/b8sk1f_orig.jpg" height="200px" onmouseover="hoverCounter++; console.log('hoverCounter: ' + hoverCounter)"></img>

Answer 2

Utilisez délégation d'événements et vérifier si l'élément plané est une image.

var count = 0; 
 

 
addEventListener("mouseover", function(e){ 
 
    if(e.target.tagName == "IMG"){ 
 
    count++; 
 
    } 
 
    console.log(count); 
 
})

<img src="http://lorempixel.com/50/50?0"/> 
 
<img src="http://lorempixel.com/50/50?1"/>

Answer 3

<img id="someImage1" src="http://via.placeholder.com/350x150" > 
<img id="someImage2" src="http://via.placeholder.com/350x150" > 

<br/> 
Hover Count: 
<input id="countDisplay" type="text"/> 

JS:

// Initial count 
    var hoverCount = 0; 

    // Function to increment 
    function onHovered(event){ 
    hoverCount++; 
    document.getElementById('countDisplay').value = hoverCount; 
    } 

    // Bind events 
    document.getElementById('someImage1').onmouseover = onHovered; 
    document.getElementById('someImage2').onmouseover = onHovered;