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

HTMLボタンでJavaScript関数を呼び出す方法【初心者向けに解説】

HTMLボタンでJavaScript関数を呼び出す最も簡単な方法

HTMLのボタンからJavaScript関数を呼び出すには、button要素やinput要素のイベントハンドラ属性（onclickなど）に、実行したい関数をそのまま記述します。最もシンプルな書き方は以下のとおりです。

<input type="button" value="クリック" onclick="myFunction();" />

ダブルクリックをトリガーにしたい場合は、ondblclick属性を使用します。

<input type="button" value="クリック" ondblclick="myFunction();" />

DOMプロパティを使って呼び出す方法

HTML側に直接関数を書かず、JavaScript側からイベントハンドラを設定することもできます。対象の要素をidで取得し、onclickやondblclickプロパティに関数を代入してください。

document.getElementById("myBtn").onclick = myFunction;

// ダブルクリックの場合
document.getElementById("myBtn").ondblclick = myFunction;

この方法を使えばHTMLとJavaScriptのコードを分離でき、可読性と保守性が大きく向上します。

addEventListenerを使う方法（推奨）

より柔軟で現代的なのがaddEventListenerメソッドです。1つの要素に複数のイベントリスナーを登録できるため、実務ではこちらがよく使われます。

document.getElementById("myBtn").addEventListener("click", myFunction);

// ダブルクリックの場合
document.getElementById("myBtn").addEventListener("dblclick", myFunction);

動作するサンプルコード

ボタンをクリックすると画面にメッセージが表示される、完全に動作するサンプルです。そのままファイルに保存してブラウザで開けば挙動を確認できます。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>サンプル</title>
</head>
<body>
  <button id="myBtn">クリックしてね</button>
  <p id="output"></p>

  <script>
    function myFunction() {
      document.getElementById("output").textContent = "ボタンがクリックされました！";
    }
    document.getElementById("myBtn").onclick = myFunction;
  </script>
</body>
</html>

まとめ

HTMLボタンからJavaScript関数を呼び出す主な方法は、「onclick属性への直接記述」「DOMプロパティへの代入」「addEventListenerによる登録」の3つです。小規模なページではonclick属性が手軽ですが、コードが大きくなるほどHTMLとJavaScriptを分離できるaddEventListenerの方が保守しやすくなります。用途に応じて使い分けましょう。

  1. JavaScriptのcall()メソッドとは？使い方と実行例をわかりやすく解説

    JavaScriptのcall()メソッドを使うと、あるオブジェクト向けに定義されたメソッドを、別のオブジェクトに対しても再利用できます。つまり、同じ関数をさまざまなオブジェクトから呼び出せるようになるのです。call()メソッドの大きな特徴は、引数（パラメータ）をカンマ区切りで個別に渡すという点です。これにより、thisの参照先を任意のオブジェクトに変更しながら、必要な値も同時に渡せます。call()メソッドの基本的な仕組みcall()は以下のような形式で使用します。関数名.call(thisArg, 引数1, 引数2, ...)第1引数（thisArg）：関数内でthisとして参照されるオ

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

    はじめにWebページのボタンがクリックされたときに、特定の関数を実行したい場面は非常によくあります。JavaScriptでは、HTML要素のonclick属性に関数名を指定するだけで、この動作を簡単に実現できます。例えば、次のようなボタンがあるとします。<button onclick="displayingMessageOnButtonClick()">押してください</button>このボタンがクリックされた際に、指定した関数を呼び出すことが目的です。コード例以下がその完全なサンプルコードです。<!DOCTYPE html> <h