Javascript
 Computer >> コンピューター >  >> プログラミング >> Javascript

VanillaJavaScriptを使用して要素のクリック数をカウントする方法

要素のクリック数を数えることは、JavaScriptで実行できる最も簡単なことの1つです。クリックを保存する変数を宣言してから、ターゲット要素でaddEventListenerメソッドを使用するだけです。

ボタン要素のクリック数を追跡するとします。例:ホームボタン。

HTMLマークアップ

HTMLボタン要素を作成し、それにbutton-homeのクラスを指定します:

<button class="button-home">Home</button>

JavaScript

次のコードをJavaScriptファイルに追加します(以下のコードについて説明します):

let buttonHome = document.querySelector(".button-home");
let CountButtonHomeClicks = 0;

buttonHome.addEventListener("click", function() {
  CountButtonHomeClicks += 1;
  console.log(CountButtonHomeClicks);
});

結果:

VanillaJavaScriptを使用して要素のクリック数をカウントする方法

上のボタン要素にCSSスタイルを少し追加して、押しやすくしました。

JavaScriptコードで何が起こっているか:

  • まず、querySelector()を使用します button-homeを選択する方法 ボタン要素のクラス。次に、それをbuttonHomeに割り当てます。 変数。
  • 次に、CountButtonHomeClicksを宣言します 今後のクリックを保存する変数。デフォルトの初期値は0です。
  • 次に、addEventListener()を使用して、buttonHomeにイベントリスナーをアタッチします。 メソッド。
  • イベントリスナー内で、'click'をリッスンしていることを指定します イベントとfunction()を実行したいこと クリックイベントごとに。
  • 関数内で、CountButtonHomeClicksに1を追加することを指定します クリックイベントがトリガーされるたびに変数。 1を追加するには、+=を使用します (プラス等しい)演算子。
  • 最後に、console.log()を使用して各クリックイベントをログに記録します CountButtonHomeClicksで 変数。

これで、特定の要素のクリック数をカウントする方法がわかりました。

知っておきたいこと:

  • 上記のコードはES6構文を使用しています。 ES5を使用している場合は、letを置き換えるだけです。 varを使用 同じように機能します。
  • この例で使用する関数型は、無名関数と呼ばれます。 関数式とは異なり、名前がないためです および関数宣言。
  • 匿名関数は再利用できません。複数のイベントで同じ関数を呼び出す必要がある場合は、関数式または関数宣言を使用してください。

コードを取得

これが上記のすべてのコードを含むCodePenです。


  1. 要素がJavaScriptで非表示になっているかどうかを確認するにはどうすればよいですか?

    JavaScriptで要素が非表示になっているかどうかを確認するには、コードは次のとおりです- 例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>    body {       font-family: "Segoe UI", Tahoma, Geneva,

  2. JavaScript数値関数

    JavaScript Number()関数は、引数として渡されたオブジェクト値をそれぞれの数値に変換します。 以下は、JavaScript Number()関数のコードです- 例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> &