Erstellen Sie einen einfachen Klickzähler mit JavaScript

1. Klicken Sie auf den Zähler auf einer Schaltfläche mit JavaScript
2. Klicken Sie auf Counter in einem div mit JavaScript
3. Click Counter - Der ungehinderte Ansatz
4. Bemerkungen

Ein Klickzähler erfasst die Anzahl der Klicks und zeigt sie auf dem Bildschirm an. Der Zähler nutzt das JavaScript-Ereignis click, um den Zählerwert zu erhöhen. Wir können es in verschiedenen Bereichen verwenden, unter anderem in Spielen (um die Punkte oder den Punktewert zu erhöhen) und in einigen zeitsparenden Hacks. Schauen wir uns den Code an, um einen einfachen Klickzähler in JavaScript zu erstellen.

Klicken Sie auf den Zähler auf einer Schaltfläche mit 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;
}

Im Code erhöhen wir den Wert der Zählervariablen counterVal bei jedem Benutzerklick um 1. Die Schritte sind wie folgt.

Das obige Codebeispiel zeigt den Klickzähler an und erhöht ihn bei einem Klick auf eine Schaltfläche. In den meisten Anwendungsfällen wenden wir den Klickzähler möglicherweise nicht immer auf eine Schaltfläche an. Um es flexibel zu machen, müssen wir das Feature für andere HTML-Elemente wie div, li etc. unterstützen. Fast alle HTML-Elemente haben das click-Event mit dem onclick-Event-Handler.

Klicken Sie auf Counter in einem div mit JavaScript

In Spielen haben die Szenen nicht immer eine Schaltfläche zum Auslösen des Zählerinkrements. Meist kann es aus HTML-Elementen wie div bestehen. In solchen Fällen können wir den onclick-Eventhandler des div-Tags verwenden, um den Klick zum Inkrementieren des Zählerwerts zu erfassen. Siehe das folgende Codebeispiel.

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

Sie werden feststellen, dass wir in diesem Beispiel div in der Zeile <div onclick="incrementClick()">Click Me</div> verwendet haben. Mit dieser Änderung wird der incrementClick() bei einem Klick des div anstelle des Buttons ausgelöst. Der Code funktioniert auch gut mit HTML-Tags wie <li>, <a>, <div> usw. Fast alle HTML-Tags, die die Event-Handler onclick unterstützen, können einem onclick-Listener zugeordnet und ähnlich bearbeitet werden.

Click Counter - Der ungehinderte Ansatz

Wenn wir den Klickzähler ungehindert in JavaScript implementieren, müssen wir den Event-Handler onclick in HTML entfernen und in den JavaScript-Code verschieben. Die Codestruktur sieht jedoch etwas anders aus. Beachten Sie den folgenden Beispielcode.

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

Hier binden wir die Klickereignisse in JavaScript-Code ein. Die Struktur bleibt gleich, außer dass wir einen onclick-Listener für das Click Me-Div und den Reset-Button verwenden. Diese Bindung erfolgt zur Laufzeit. Und an diesen Click-Listener binden wir unsere definierten Funktionen. Der Code sieht also ähnlich aus und hat nicht viele Änderungen.

Bemerkungen

Der Unterschied zum ungehinderten Ansatz besteht darin, dass wir den onclick-Listener im JavaScript-Code binden und nicht im HTML. Allein aus dem HTML wird es schwer zu erkennen sein, wenn dem Button oder dem div ein onclick-Event-Handler zugewiesen wird.

Bei diesem Ansatz sieht der Code sauberer aus, da alle onclick-Ereignisse im JavaScript gebunden und behandelt werden. Es hält den HTML-Code mit dem Markup sauber, da kein JavaScript-Code in HTML eindringt.

Der Code funktioniert nicht, wenn wir den onclick-Listener nicht innerhalb der window.onload-Funktion setzen. Der Code document.getElementById("click-div") gibt null zurück, da er das HTML-Element nicht finden kann. Die Funktion wondow.onload wird ausgelöst, sobald das Fenster geladen und das DOM bereit ist. Durch das Einfügen des Codes in den Block window.onload wird also sichergestellt, dass das HTML-Element geladen wird und mit der Funktion document.getElementById() von JavaScript abgefragt werden kann.