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

【JavaScript入門】onclick()でボタンクリック時に関数を呼び出す方法

はじめに

Webページのボタンがクリックされたときに、特定の関数を実行したい場面は非常によくあります。JavaScriptでは、HTML要素のonclick属性に関数名を指定するだけで、この動作を簡単に実現できます。

例えば、次のようなボタンがあるとします。

<button onclick="displayingMessageOnButtonClick()">押してください</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>
    <p id="showTheTextMessage"></p>
    <button onclick="displayingMessageOnButtonClick()">押してください</button>
</body>
<script>
    function displayingMessageOnButtonClick() {
        const showMessage = document.getElementById('showTheTextMessage');
        showMessage.innerHTML = 'Welcome to Javascript Program...';
        showMessage.style.display = 'block';
    }
</script>
</html>

プログラムの実行方法

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

実行結果

ページを開くと、最初は次のように表示されます。

【JavaScript入門】onclick()でボタンクリック時に関数を呼び出す方法

続いて、ボタンをクリックしてみましょう。クリック後の出力は以下のとおりです。

【JavaScript入門】onclick()でボタンクリック時に関数を呼び出す方法

補足：addEventListener() を使った別の書き方

HTMLに直接 onclick 属性を記述する方法以外にも、JavaScript側で addEventListener() メソッドを使ってイベントを登録する方法があります。こちらの方がHTMLとJavaScriptを分離でき、保守性の高いコードになります。

document.getElementById('myButton').addEventListener('click', displayingMessageOnButtonClick);

用途に応じて使い分けるとよいでしょう。

  1. 【JavaScript】変数に関数を代入して呼び出す方法

    JavaScriptでは、関数を変数に代入することができます（これを「関数式」と呼びます）。さらに、return文を使うことで、変数に代入した関数の処理結果を呼び出し元に返すことも可能です。以下の例では、無名関数を変数 studentNames に代入し、その内部で jQuery の each() メソッドを使って各要素の data-st 属性の値を配列に格納しています。最後に return 文で、カンマ区切りに結合した文字列を返しています。コード例<!DOCTYPE html> <html lang="en"> <head> <m

  2. Tkinterでボタンやキー入力に関数をバインドして呼び出す方法

    Tkinterでアプリケーションを開発していると、「特定のボタンがクリックされたとき」や「キーが押されたとき」に任意の関数を実行したい場面がよくあります。そのような場合は、bind(<ボタンまたはキー>, コールバック関数) メソッドを使うことで、処理をまとめた関数をボタンやキー入力に簡単に紐づけることができます。キーボードの任意のキーだけでなく、マウスクリックなどのイベントも同じ方法でバインド可能です。また、ttk.Button のように command オプションを持つウィジェットの場合は、ボタンの生成時に直接コールバック関数を指定する方法も利用できます。サンプルコード以下の例