バニラJavaScriptで要素を作成する方法

要素のクリック数を数えることは、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)
})

結果：

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

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

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

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

知っておきたいこと：

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

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