Créer un compteur de clics simple à l'aide de JavaScript

1. Compteur de clics sur un bouton à l’aide de JavaScript
2. Compteur de clics sur une div à l’aide de JavaScript
3. Compteur de clics - L’approche sans obstruction
4. Remarques

Un compteur de clics enregistre le nombre de clics et l’affiche à l’écran. Le compteur utilise l’événement JavaScript click pour incrémenter la valeur du compteur. Nous pouvons l’utiliser dans divers domaines, y compris dans les jeux (pour augmenter les points ou la valeur du score) et dans certains hacks permettant de gagner du temps. Regardons le code pour créer un simple compteur de clics en JavaScript.

Compteur de clics sur un bouton à l’aide de JavaScript

<h3><center>JavaScript Click Counter</center></h3>
<div>
    <center><h3 id="counter-label">0</h3></center>
</div>
<center>
    <div>
        <button onclick="incrementClick()">Click Me</button>
        <button onclick="resetCounter()">Reset</button>
    </div>
</center>

var counterVal = 0;

function incrementClick() {
  updateDisplay(++counterVal);
}

function resetCounter() {
  counterVal = 0;
  updateDisplay(counterVal);
}

function updateDisplay(val) {
  document.getElementById('counter-label').innerHTML = val;
}

Dans le code, nous incrémentons la valeur de la variable compteur counterVal de 1 à chaque clic de l’utilisateur. Les étapes sont les suivantes.

L’exemple de code ci-dessus affiche le compteur de clics et l’incrémente lors d’un clic sur un bouton. Dans la plupart des cas d’utilisation, il se peut que nous n’appliquions pas toujours le compteur de clics sur un bouton. Pour le rendre flexible, nous devrons prendre en charge la fonctionnalité pour d’autres éléments HTML tels que div, li etc. Presque tous les éléments HTML ont l’événement click avec le gestionnaire d’événements onclick.

Compteur de clics sur une div à l’aide de JavaScript

Dans les jeux, les scènes n’ont pas toujours de bouton pour déclencher l’incrémentation du compteur. La plupart du temps, il peut être composé d’éléments HTML comme div. Dans de tels cas, nous pouvons utiliser le gestionnaire d’événements onclick de la balise div pour capturer le clic pour incrémenter la valeur du compteur. Reportez-vous à l’exemple de code suivant.

<h3><center>JavaScript Click Counter</center></h3>
<div>
    <center><h3 id="counter-label">0</h3></center>
</div>
<center>
    <div>
        <div onclick="incrementClick()">Click Me</div>
        <button onclick="resetCounter()">Reset</button>
    </div>
</center>

var counterVal = 0;

function incrementClick() {
  updateDisplay(++counterVal);
}

function resetCounter() {
  counterVal = 0;
  updateDisplay(counterVal);
}

function updateDisplay(val) {
  document.getElementById('counter-label').innerHTML = val;
}

Vous pouvez remarquer que dans cet exemple, nous avons utilisé div dans la ligne <div onclick="incrementClick()">Click Me</div>. Avec ce changement, le incrementClick() se déclenche sur un clic du div au lieu du bouton. Le code fonctionnera bien avec les balises HTML comme <li>, <a>, <div>, etc. Presque toutes les balises HTML qui prennent en charge les gestionnaires d’événements onclick peuvent être associées à un écouteur onclick et traitées de la même manière.

Compteur de clics - L’approche sans obstruction

Si nous implémentons le compteur de clics avec une approche non obstruée en JavaScript, nous devrons supprimer le gestionnaire d’événements onclick en HTML et le déplacer vers le code JavaScript. La structure du code semble un peu différente cependant, observez l’exemple de code suivant.

<h3><center>JavaScript Click Counter</center></h3>
<div>
    <center><h3 id="counter-label">0</h3></center>
</div>
<center>
    <div>
        <div id="click-div">Click Me</div>
        <button id="reset-button">Reset</button>
    </div>
</center>

window.onload =
    function() {
  let clickDiv = document.getElementById('click-div');
  clickDiv.onclick = incrementClick;

  let resetBtn = document.getElementById('reset-button');
  resetBtn.onclick = resetCounter;
}

var counterVal = 0;

incrementClick =
    function() {
  updateDisplay(++counterVal);
}

function resetCounter() {
  counterVal = 0;
  updateDisplay(counterVal);
}

function updateDisplay(val) {
  document.getElementById('counter-label').innerHTML = val;
}

Ici, nous lions les événements de clic dans le code JavaScript. La structure reste la même, sauf que nous utilisons un écouteur onclick pour la div Click Me et le bouton Reset. Cette liaison a lieu au moment de l’exécution. Et à cet écouteur de clic, nous lions nos fonctions définies. Le code est donc similaire et n’a pas beaucoup de changements.

Remarques

La différence avec l’approche non obstruée est que nous lions l’écouteur onclick dans le code javascript plutôt que de le faire dans le HTML. Il sera difficile à réaliser à partir du HTML seul si le bouton ou le div est affecté d’un gestionnaire d’événement onclick.

Avec cette approche, le code semble plus propre car tous les événements onclick sont liés et gérés dans le JavaScript. Il garde le HTML propre avec le balisage car aucun code JavaScript ne s’immisce dans le HTML.

Le code ne fonctionnera pas si nous ne définissons pas l’écouteur onclick dans la fonction window.onload. Le code document.getElementById("click-div") renverra null car il ne pourra pas trouver l’élément HTML. La fonction wondow.onload se déclenche une fois la fenêtre chargée et le DOM prêt. Par conséquent, en plaçant le code dans le bloc window.onload, l’élément HTML est chargé et peut être interrogé avec la fonction document.getElementById() de JavaScript.