Je crée donc un "Cat Clicker" pour un projet dans mon cours Udacity. Fondamentalement, nous avons 5 photos de chats (j'en ai actuellement 4), mais chaque image de chat devrait avoir son propre compteur de clics pour le moment où l'image spécifique est cliquée. Je sais qu'il existe un moyen d'utiliser une boucle for, mais je ne sais pas comment. J'ai essayé d'utiliser simplement un addeventlistener pour chaque image individuelle, mais cela compte chaque clic (peu importe où) sur la page ... quelqu'un peut-il comprendre ce que je manque / fais mal?

var sassy = document.createElement("img");
sassy.src = 'images/cat.jpg';
sassy.height = "500";
sassy.width = "640";
sassy.alt = "Sassy Cat";
document.getElementById("catimage").appendChild(sassy);

var addUp = (function() {
  var count = 0;
  return function() {
    var sassy = document.getElementById("catimage");
    if (sassy) sassy.innerHTML = "Picture Clicks: " + ++count;
  }
}());
document.addEventListener("click", addUp, false);

var grumpy = document.createElement("img");
grumpy.src = 'images/grumpy-cat.jpg';
grumpy.height = "500";
grumpy.width = "640";
grumpy.alt = "Grumpy Cat";
document.getElementById("grumpyimage").appendChild(grumpy);

var cuddlecats = document.createElement("img");
cuddlecats.src = 'images/cuddles.jpg';
cuddlecats.height = "500";
cuddlecats.width = "640";
cuddlecats.alt = "Cuddling Cats";
document.getElementById("cuddlingcats").appendChild(cuddlecats);

var sketchy = document.createElement("img");
sketchy.src = 'images/sketchycat.jpg';
sketchy.height = "500";
sketchy.width = "640";
sketchy.alt = "Sketchy Cat";
sketchy.co
document.getElementById("sketchycat").appendChild(sketchy);
<div id="catimage">
  <figcaption>Sassy Cat</figcaption>
  <h3 id="sassycount">Picture Clicks: 0</h3>
</div>

<div id="grumpyimage">
  <figcaption>Grumpy Cat</figcaption>
  <h3 id="grumpycount">Picture Clicks: 0</h3>
</div>
<div id="cuddlingcats">
  <figcaption>Cuddling Cats</figcaption>
  <h3 id="cuddlecount">Picture Clicks: 0</h3>
</div>
<div id="sketchycat">
  <figcaption>Sketchy Cat</figcaption>
  <h3 id="sketchcount">Picture Clicks: 0</h3>
</div>
0
Jeff Berlin 16 janv. 2017 à 21:48

2 réponses

Meilleure réponse

Les erreurs que vous faites sont:

  1. Vous n'appelez la fonction addUp qu'une seule fois: ce qui retourne une seule instance de votre fonction «interne». Cette fonction interne a sa fermeture qui contient une seule variable «count». En d'autres termes, vous n'utilisez qu'un seul compteur pour toutes les images.
  2. Vous ajoutez l'auditeur au document. Par conséquent, n'importe où cliqué sur le document appelle votre écouteur d'événement.

Essaye ça:

var addUp = function(counterId) {
  var count = 0;

  return function () {
     var counterEle = document.getElementById(counterId);
     if (counterEle)
        counterEle.innerHTML = "Picture Clicks: " + ++count;
  }
};

var catImage = document.getElementById("cat-image");
catImage.addEventListener("click", addUp("cat-counter-id"), false);

Répétez les deux dernières lignes pour les autres images.

La chose importante à noter est que vous appelez add Up pour créer un écouteur pour chaque paire image / compteur.

Il existe certainement des moyens plus efficaces d'atteindre ce qui précède sans utiliser de fermetures, mais je crois comprendre que vous essayez d'apprendre les fermetures.

0
Emmanuel 16 janv. 2017 à 19:32

Vous ajoutez l'écouteur d'événements au document, donc partout où vous cliquez, image ou non, la fonction addUp est appelée.

Pour attacher un événement à un élément spécifique, vous devez appeler addEventListener sur cet élément.

var grumpyimage = document.getElementById("grumpyimage");
grumpyimage.addEventListener("click", addUp, false);

Vous pouvez maintenant cliquer sur grumpyimage et il appellera addUp Pour plus de simplicité, vous devriez avoir une fonction addUp pour chaque image.

Gardez à l'esprit que vous devez généraliser ceci pour n'utiliser qu'une seule fonction addUp et incrémenter un compteur basé sur le id du compteur comme ceci:

var addUp = function(counterId) {
  var count = 0;

  return function () {
     var counterEle = document.getElementById(counterId);
     if (counterEle)
        counterEle.innerHTML = "Picture Clicks: " + ++count;
  }
};
var grumpyimage = document.getElementById("grumpyimage");
grumpyimage.addEventListener("click", addUp("grumpyimage-counter"), false);
1
sabotero 16 janv. 2017 à 19:32