Comment ajouter un compteur pour montrer combien de fois un élément div a été cliqué?

Voulez-vous dire un compteur basique comme celui-ci? Vous pouvez également ajouter l’écouteur d’événements à un div normal (il n’est pas nécessaire d’être un élément de bouton):

JS:

<button id="button">Click!</button>
<div class="counter">0</div>

HTML:

$(document).ready(function() {
      let counter = 0
      document.getElementById("button").addEventListener("click", function(){
        counter++
        document.querySelector(".counter").innerHTML = counter
      });
    });

Bienvenue sur stackoverflow @Gabrielle! Je comprends que vous êtes nouveau dans JavaScript et que vous n'avez pas été en mesure de trouver une réponse significative pour tenter ce projet.

Commençons d'abord par basique, en JavaScript, nous devons stocker la valeur des clics, nous déclarons donc une variable p>

i = 0

Maintenant, nous voulons donner un identifiant à ce div spécifique, alors disons

Dans notre bloc de code JavaScript, nous devons faire référence à special, donc nous créons une autre variable,

myDiv = document. getElementById ("special")

myDiv est maintenant référencé à ce div spécial que vous souhaitez suivre. Ensuite, nous créons l'événement on click pour suivre les clics sur cet élément.

myDiv.addEventListener ("click", function () {Clicked! Do something ...})

addEventListener indique au DOM qu'il veut écouter les clics se produisant sur cet élément uniquement et si c'est le cas, déclenchez les instructions à l'intérieur de la balise de fonction.

Maintenant on augmente le compteur, ou la variable i à chaque fois qu'un clic se produit, on utilise donc i + = 1

De cette façon, à chaque clic qui se produit, i en ajoute un à lui-même.

Enfin, nous devons montrer ce numéro à un autre identifiant spécial sur la page, je vous laisserai cette partie "Depuis c'est simple" à vous de comprendre, mais je la référencerai ci-dessous.

<div id="special">Click Me!</div>

// Variables
i = 0;
myDiv = document.getElementById("special");

// Event Listeners
myDiv.addEventListener("click", function() {
  i += 1;
  console.log(i);
});

Pour obtenir de l'aide pour afficher le numéro à l'intérieur de votre page, accédez à JS Inner HTML

J'espère que cela vous a aidé! N'oubliez pas de donner mon avis si c'est le cas!

Tout d'abord, vous devez donner à vos divs des étiquettes que javascript peut cibler. Nous pouvons utiliser id car ils sont uniques. Par exemple:

<div id="clicker">click here</div><div id="counter">0</div>

La manière dont javascript cible id se fait via document.getElementById("clicker")

Ensuite, nous devons savoir quand le div est cliqué. Nous faisons cela en attachant un "auditeur" au div qui suit les "clics":

div {
   display: inline-block;
   padding: 5px;
   border: solid 1px gray;
}

Maintenant, lorsqu'un clic est détecté, que la fonction (c'est-à-dire le code) qui est attaché au clic s'exécutera. Ce qui suit explique le code de la fonction.

Nous utilisons .textContent pour récupérer le contenu du texte dans le div et l'assigner à la variable count :

// target the "clicker" div and adds a listener to detect clicks
document.getElementById("clicker").addEventListener("click", function (event) { // for each click, it will run this function
    // get current value from "counter" div
    let count = document.getElementById("counter").textContent;
    // turn string to integer
    parseInt(count);
    // add one
    count++;
    // set the new value back to "counter" div
    document.getElementById("counter").textContent = count;
    
});

Puisque count est une chaîne, nous la convertissons d'abord en nombres avec la fonction parseInt . Ce n'est pas tout le temps nécessaire en javascript car il couvre automatiquement, mais bonne pratique quand même.

document.getElementById("counter").textContent = count; //set to new value

Maintenant que nous savons que c'est un nombre, nous pouvons y ajouter un. Ceci est une forme courte:

counter++; // same as saying counter = counter + 1;

Vous vous souvenez comment nous avons obtenu le contenu textuel du div avec .textContent ? Nous pouvons également définir le contenu du texte avec le même .textContent comme ceci:

parseInt(count);

Assemblage:

p>

let count = document.getElementById("counter").textContent;

document.getElementById("clicker").addEventListener("click", ...

<div id="clicker"></div>

Vous avez d'abord besoin d'un compteur où vous stockez le nombre de clics

my_div.addEventListener("click", function(){
  // add code here that increases the /clicks/ variable
});

Ensuite, vous devez trouver votre div dans le DOM en utilisant

my_div = document.getElementById("click_div");

Un exemple de recherche de votre div serait

document.getElementById() // or
document.getElemenyByClass() // or similar

Ensuite, vous devez ajouter un Écouteur d'événements à la div

Quelque chose comme ça

let clicks = 0;

p>

Voici une méthode très conviviale pour les débutants:

HTML et CSS:
Le HTML contient deux éléments div (chacun avec son propre attribut id afin que notre code JavaScript puisse les trouver facilement.) Et le CSS améliore l'apparence du HTML. >

JavaScript:
Deux variables sont créées et chacune stocke une référence à l'un des éléments div . Un écouteur d'événements est créé, pour remarquer chaque fois qu'un événement click se produit sur la page et répondre en appelant la fonction count .

Le count La fonction est créée. La plupart de ses instructions sont enveloppées dans un bloc if , de sorte que le code ne s'exécutera que si la condition est remplie. (La condition de déclenchement est que la cible de l'événement click était l'élément div dont l'attribut id a la valeur " clickableDiv ".) p>

Désormais, chaque fois qu'un clic se produit, si la condition est remplie, le reste du code s'exécute:

1. Deux variables sont créées: oldCount et newCount .
2. oldCount reçoit une valeur. (Cette valeur est la sortie de l'appel la fonction intégrée parseInt () , en utilisant ce qui se trouve à l'intérieur du Élément counterDiv comme entrée.
3. newCount reçoit un valeur. (Cette valeur est une de plus que la valeur de oldCount .)
4. Tout ce qui se trouve à l'intérieur de l'élément counterDiv est remplacé par le valeur stockée dans newCount .

<div id=clickableDiv>Click me</div>
<div id="counterDiv">0</div>

div {
  float: left;
  width: 25%;
  height: 2em;
  padding: 1em;
  text-align: center;
  font-weight: bold;
  border: 1px solid grey;
  }

// Defines references to elements (using `const` because the values
//   should never change)
const clickableDiv = document.getElementById("clickableDiv");
const counterDiv = document.getElementById("counterDiv");

// Defines a listener that will call our function whenever a click happens
document.addEventListener("click", count);

// Defines the `count` function
function count(event){

  // Limits which click events will change our counter
  if (event.target == clickableDiv){

    // Declares variables to hold numbers (using `let` in case we 
    //   might want to change the values later)
    let oldCount;
    let newCount;

    // Assumes the HTML content of counterDiv looks like a number, 
    // gets that number, and stores it in oldCount
    oldCount = parseInt(counterDiv.innerHTML);

    // Adds 1 to the number stored in oldCount, and stores the result 
    //   in newCount
    newCount = oldCount + 1;

    // Makes a string from the number (not strictly necessary) 
    //   and replaces the HTML content of counterDiv with that string
    counterDiv.innerHTML = newCount.toString();

  }
}