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

onclickイベントで複数のJavaScript関数を呼び出す方法

onclickイベントで複数のJavaScript関数を呼び出す基本方法

HTMLのonclickイベントで複数のJavaScript関数を呼び出したい場合は、各関数をセミコロン（;）で区切って記述します。これにより、クリック1回で複数の関数を順番に実行できます。

基本的な書き方は以下のとおりです。

onclick="Display1();Display2()"

このように、最初の関数の後にセミコロンを付け、続けて次の関数を記述するだけで、複数の処理をまとめて実行できます。3つ以上の関数を呼び出す場合も同様に、セミコロンで区切りながら追加していきます。

サンプルコード

以下は、ボタンをクリックすると2つの関数（Display1()とDisplay2()）が順番に実行される完全なHTMLの例です。

<html>
   <head>
      <script>
         function Display1() {
            document.write("Hello there!");
         }
         function Display2() {
            document.write("Hello World!");
         }
      </script>
   </head>
   <body>
      <p>次のボタンをクリックして関数を呼び出してください</p>
      <form>
         <input type = "button" onclick = "Display1(); Display2()" value = "Result">
      </form>
   </body>
</html>

コードの解説

  • <script>タグ内で、Display1()とDisplay2()という2つの関数を定義しています。それぞれ「Hello there!」と「Hello World!」という文字列を出力します。
  • <input type="button">のonclick属性に「Display1(); Display2()」と記述することで、ボタンクリック時に両方の関数が左から順に実行されます。

補足：より実践的な代替方法

セミコロンでの連結は手軽な方法ですが、処理が増えるとonclick属性が長くなり、HTMLの可読性が低下します。実務では以下のような方法も検討しましょう。

  • 1つの関数にまとめる：複数の処理を呼び出す専用の関数（例：runAll()）を作成し、onclick="runAll()"のように指定する。
  • addEventListenerを使う：JavaScript側でelement.addEventListener('click', 関数名)を複数回登録すれば、HTMLに直接書かずに関数を複数紐づけられます。

簡単なデモや学習用途ではセミコロンによる記述が便利ですが、規模の大きなプロジェクトではaddEventListenerの利用が推奨されます。

  1. クリックイベントでJavaScript関数を呼び出す方法をわかりやすく解説

    JavaScriptとHTMLのやり取りは、ユーザーやブラウザがページを操作した際に発生する「イベント」を通じて処理されます。たとえば、ページが読み込まれること自体もイベントの一つです。ユーザーがボタンをクリックすれば、そのクリックもイベントとして扱われます。このほかにも、キーボードのキーを押す、ウィンドウを閉じる、ウィンドウのサイズを変更するなど、さまざまな操作がイベントとして検出されます。onclickイベントとはonclick()イベントは、ユーザーがマウスの左ボタンをクリックした瞬間に発生するイベントです。フォーム送信前の入力値チェック（バリデーション）や、警告メッセージの表示など、ク

  2. JavaScript関数で名前付き引数を使う方法｜分割代入で簡単に実現するテクニック

    JavaScriptにおける名前付き引数とは？ Pythonなどの言語には「名前付き引数（キーワード引数）」という機能が標準で備わっていますが、JavaScriptにはこの機能が組み込まれていません。しかし、オブジェクトの分割代入（Destructuring）を活用することで、名前付き引数と同じ挙動を簡単に実現できます。 基本的な仕組み 関数の引数としてオブジェクトを1つ受け取り、その中から必要なプロパティを分割代入で取り出します。各プロパティにはデフォルト値も同時に指定できるため、引数が省略された場合でもエラーにならず安全に処理できます。 サンプルコード 以下は、オブジェクトを引数として渡し