JavaScript 初心者でも安心！図解でわかる HTML ボタンと JavaScript の連携方法

2024-05-20

HTML ボタンで JavaScript 関数を呼び出す方法

onclick 属性を使う

最も簡単な方法は、ボタン要素に onclick 属性を設定して、呼び出したい関数の名前を指定する方法です。

<button onclick="myFunction()">ボタン</button>

上記の例では、myFunction という名前の関数がボタンクリック時に呼び出されます。

addEventListener メソッドを使う

より柔軟な方法として、addEventListener メソッドを使って、ボタン要素に click イベントリスナーを追加する方法があります。

<button id="myButton">ボタン</button>

<script>
  const button = document.getElementById('myButton');
  button.addEventListener('click', function() {
    myFunction();
  });
</script>

上記の例では、myButton IDを持つボタン要素に click イベントリスナーが追加されています。このイベントリスナーは、ボタンがクリックされたときに myFunction 関数を呼び出します。

一般的に、シンプルなタスクの場合は onclick 属性を使う方が簡単です。一方、より複雑な処理や、複数のイベントリスナーを追加する必要がある場合は、addEventListener メソッドを使う方が適しています。

補足

関数は、<script> タグ内に記述する必要があります。
関数名は、小文字と大文字を区別します。
関数に引数を渡す場合は、() 内にカンマ区切りで引数を記述します。
イベントリスナー関数は、this キーワードを使ってイベントオブジェクトにアクセスできます。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ボタンで関数呼び出し</title>
</head>
<body>
  <button onclick="alertMessage()">メッセージを表示</button>

  <script>
    function alertMessage() {
      alert('ボタンがクリックされました！');
    }
  </script>
</body>
</html>

説明

このコードは以下の動作をします。

HTML ファイル内に <button> 要素と <script> 要素を記述します。
<button> 要素に onclick 属性を設定し、alertMessage 関数の名前を指定します。
<script> 要素内に alertMessage 関数を定義します。
alertMessage 関数は、アラートダイアログを表示します。

実行方法

上記のコードを index.html などの名前で保存します。
Web ブラウザで index.html ファイルを開きます。
"メッセージを表示" ボタンをクリックすると、アラートダイアログが表示されます。

応用例

このサンプルコードは、基本的な動作のみを示しています。実際には、以下のような様々な応用が可能です。

フォームデータを送信する
DOM 要素を操作する
Ajax リクエストを実行する
外部ライブラリを呼び出す

HTML ボタンで JavaScript 関数を呼び出すその他の方法

onsubmit 属性を使う

この属性は、<form> 要素が送信されたときに呼び出される関数を指定するために使用されます。ボタンが <form> 内にある場合、この属性を使用して、ボタンクリック時に JavaScript 関数を呼び出すことができます。

<form onsubmit="return myFunction()">
  <button type="submit">送信</button>
</form>

<script>
  function myFunction() {
    // フォームデータの処理
    return true; // 送信を許可
  }
</script>

onfocus または onblur 属性を使う

これらの属性は、要素にフォーカスが当たったとき、またはフォーカスが外れたときに呼び出される関数を指定するために使用されます。ボタンにこれらの属性を使用して、ボタンにフォーカスが当たったとき、またはフォーカスが外れたときに JavaScript 関数を呼び出すことができます。

<button onfocus="myFunctionFocus()">フォーカス</button>
<button onblur="myFunctionBlur()">ブラー</button>

<script>
  function myFunctionFocus() {
    // ボタンにフォーカスが当たったときの処理
  }

  function myFunctionBlur() {
    // ボタンのフォーカスが外れたときの処理
  }
</script>

addEventListener メソッドを使って、他のイベントリスナーを追加する

click イベント以外にも、mouseover, mouseout, keydown, keyup などの様々なイベントリスナーを追加することができます。

<button id="myButton">ボタン</button>

<script>
  const button = document.getElementById('myButton');
  button.addEventListener('mouseover', function() {
    // マウスオーバー時の処理
  });

  button.addEventListener('mouseout', function() {
    // マウスアウト時の処理
  });
</script>