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

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

ボタンをクリックしたときにアラートを表示するには、JavaScriptのaddEventListener()メソッドを使用します。例として、HTMLページ上に以下のようなボタンが配置されている場合を考えてみましょう。

<button type="button">Please Press Me</button>

サンプルコード

以下は、ボタンがクリックされたときにアラートを表示する完全なコード例です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<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>
<body>
    <button type="button">Please Press Me</button>
</body>
<script>
    var pressedButton = document.getElementsByTagName("button")[0];
    pressedButton.addEventListener("click", function (event) {
        alert("You have pressed the button..........")
    })
</script>
</html>

プログラムの実行方法

上記のプログラムを実行するには、まずファイルを「index.html」など任意の名前で保存します。次に、VS Codeエディタでそのファイルを右クリックし、「Open with Live Server」を選択してブラウザで開いてください。

実行結果

実行すると、画面には以下のようにボタンが表示されます。

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

ボタンをクリックするたびに、アラートメッセージがポップアップで表示されます。

ボタンクリック後の表示

ボタンを押した際に表示されるアラートは以下のとおりです。

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

ポイント解説

document.getElementsByTagName("button")[0]でページ内の最初のbutton要素を取得し、addEventListener("click", ...)によってクリックイベントのリスナーを登録しています。この方法を使えば、HTMLに直接onclick属性を記述することなく、JavaScript側で柔軟にイベント処理を管理できます。

  1. JavaScriptでToDoリスト（やることリスト）を作成する方法

    JavaScriptを使えば、テキストボックスに入力したタスクを順番にリストへ追加していく、シンプルなToDoリスト（やることリスト）を簡単に作成できます。この記事では、HTML・CSS・JavaScript（jQuery）を組み合わせた基本的な実装例を、コードと実行手順とあわせて紹介します。 実装例 以下は、ToDoリストを作成するためのコードです。 <!DOCTYPE html> <html lang="en"> <head>    <meta charset="UTF-8"> &n

  2. HTMLでファイルアップロードボタンを作成する方法をわかりやすく解説

    HTMLでファイルアップロードボタンを作成するには、<input>要素のtype属性に「file」を指定します。これにより、ユーザーが自分のPCやスマートフォンからファイルを選択してアップロードできるボタンが簡単に設置できます。 コード例 <!DOCTYPE html> <html> <head> <title>ファイルアップロードボタンの例</title> </head> <body> <h1>ファイルアップロードボタンの例</h1> <p>「ファイルを選択」ボ