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

JavaScriptでclass属性を持つボタンをクリックしたときにアラートを表示する方法

JavaScriptで特定のクラス名が付いたボタンをクリックしたときにアラートを表示するには、document.getElementsByClassName()メソッドを使用します。このメソッドは、指定したクラス名を持つすべての要素をまとめて取得できるため、for...ofループで各要素を取り出し、それぞれにクリックイベントリスナーを登録するのがポイントです。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<button class="clickTheButton">クリックするとアラートが表示されます</button>
<script>
    for (var clickButton of
    document.getElementsByClassName("clickTheButton"))
    clickButton.addEventListener("click", alertMessage);
    function alertMessage() {
        alert("ボタンがクリックされました");
    }
</script>
</body>
</html>

プログラムの実行方法

上記のプログラムを実行するには、まずファイル名を「index.html」などの任意の名前（拡張子は.html）で保存します。その後、VS Codeエディタ上で保存したファイルを右クリックし、「Open with Live Server」を選択すると、ブラウザでページが開きます。

実行結果

上記のコードを実行すると、次のようにボタンが表示されます。

JavaScriptでclass属性を持つボタンをクリックしたときにアラートを表示する方法

続いて、ボタンをクリックしてみましょう。クリックすると、次のようにアラートメッセージが画面に表示されます。

JavaScriptでclass属性を持つボタンをクリックしたときにアラートを表示する方法

コードのポイント

  • getElementsByClassName()：クラス名を指定して要素のコレクション（HTMLCollection）を取得します。IDとは異なり複数の要素が該当する可能性があるため、戻り値は配列風のオブジェクトになります。
  • for...ofループ：取得したすべてのボタン要素に対して、個別にイベントリスナーを登録できます。同じクラスのボタンが複数あっても、どれをクリックしてもアラートが動作します。
  • addEventListener("click", 関数名)：第2引数には関数の参照を渡す点に注意してください。関数名の後に括弧「()」を付けると、ページ読み込み時に関数が即座に実行されてしまいます。
  1. 【JavaScript】ドキュメント全体のHTMLを文字列として取得する方法を解説

    Webページのソースコード全体を取得して処理したい場面は、デバッグや動的なコンテンツ操作など、JavaScript開発では意外と多くあります。この記事では、ドキュメント全体のHTMLを文字列として取得する方法を、具体的なコード例とともにわかりやすく解説します。 innerHTMLプロパティを使った取得方法 ドキュメント全体のHTMLを文字列として取得するには、document.documentElementのinnerHTMLプロパティを利用します。 document.documentElement.innerHTML; document.documentElementはHTML文書のルート要

  2. Android WebViewでJavaScriptを使ってHTMLボタンのクリックを検出する方法

    この記事では、AndroidアプリのWebViewに表示したHTMLページ内のボタンがクリックされたことを、JavaScriptインターフェースを介してネイティブ側で検出する方法を解説します。 WebView上のHTMLとAndroidアプリは、addJavascriptInterface()を使うことで相互に連携できます。HTML側のボタンクリックイベントをJava側のメソッドで受け取り、Toastでメッセージを表示するまでの流れを、手順を追って見ていきましょう。 ステップ1：新しいプロジェクトを作成する Android Studioを起動し、メニューから「File」→「New Projec