Crea un semplice contatore di clic utilizzando JavaScript

1. Fare clic su Contatore su un pulsante utilizzando JavaScript
2. Fare clic su Contatore su un div utilizzando JavaScript
3. Contatore di clic - L’approccio non ostruttivo
4. Osservazioni

Un contatore di clic registra il numero di clic e lo visualizza sullo schermo. Il contatore utilizza l’evento JavaScript click per incrementare il valore del contatore. Possiamo usarlo in varie aree, anche nei giochi (per aumentare i punti o il valore del punteggio) e in alcuni hack per risparmiare tempo. Diamo un’occhiata al codice per creare un semplice contatore di clic in JavaScript.

Fare clic su Contatore su un pulsante utilizzando 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;
}

Nel codice, incrementiamo il valore della variabile contatore counterVal di 1 ad ogni clic dell’utente. I passi sono come segue.

L’esempio di codice sopra mostra il contatore dei clic e lo incrementa al clic del pulsante. Nella maggior parte dei casi d’uso, potremmo non applicare il contatore dei clic sempre su un pulsante. Per renderlo flessibile, dovremo supportare la funzionalità per altri elementi HTML come div, li ecc. Quasi tutti gli elementi HTML hanno l’evento click con il gestore di eventi onclick.

Fare clic su Contatore su un div utilizzando JavaScript

Nei giochi, le scene non hanno sempre un pulsante per attivare l’incremento del contatore. Per lo più può essere costituito da elementi HTML come div. In tali casi, possiamo utilizzare il gestore di eventi onclick del tag div per catturare il clic per incrementare il valore del contatore. Fare riferimento al seguente esempio di codice.

<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;
}

Puoi osservare che in questo esempio abbiamo usato div nella riga <div onclick="incrementClick()">Click Me</div>. Con questa modifica, l’incrementClick() viene attivato con un clic del div anziché del pulsante. Il codice funzionerà bene anche con tag HTML come <li>, <a>, <div> ecc. Quasi tutti i tag HTML che supportano i gestori di eventi onclick possono essere associati a un listener onclick e lavorati in modo simile.

Contatore di clic - L’approccio non ostruttivo

Se implementiamo il contatore dei clic con un approccio senza ostacoli in JavaScript, dovremo rimuovere il gestore di eventi onclick in HTML e spostarlo nel codice JavaScript. Tuttavia, la struttura del codice ha un aspetto leggermente diverso, osserva il seguente codice di esempio.

<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;
}

Qui, leghiamo gli eventi click nel codice JavaScript. La struttura rimane la stessa, tranne per il fatto che utilizziamo un listener onclick per il div Click Me e il pulsante Reset. Questa associazione avviene in fase di esecuzione. E a quel click listener, leghiamo le nostre funzioni definite. Quindi il codice sembra simile e non ha molte modifiche.

Osservazioni

La differenza tra l’approccio senza ostacoli è che leghiamo l’ascoltatore onclick nel codice javascript invece di farlo nell’HTML. Sarà difficile capire dal solo HTML se al pulsante o al div è assegnato un gestore di eventi onclick.

Con questo approccio, il codice appare più pulito poiché tutti gli eventi onclick sono legati e gestiti in JavaScript. Mantiene l’HTML pulito con il markup poiché nessun codice JavaScript si intromette nell’HTML.

Il codice non funzionerà se non impostiamo il listener onclick all’interno della funzione window.onload. Il codice document.getElementById("click-div") restituirà null poiché non sarà in grado di trovare l’elemento HTML. La funzione wondow.onload viene attivata una volta che la finestra è stata caricata e il DOM è pronto. Quindi inserendo il codice all’interno del blocco window.onload si assicura che l’elemento HTML sia caricato e possa essere interrogato con la funzione document.getElementById() di JavaScript.