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

【JavaScript】onclickイベントで2つ以上の関数を実行する方法

JavaScriptでonclickイベントを使ってボタンをクリックした際に、2つ以上の関数を同時に実行したいケースはよくあります。最もシンプルな方法は、呼び出し用の関数（ラッパー関数）を1つ作成し、その中で実行したい複数の関数を順番に呼び出すことです。

手順1：ボタンを設置する

まず、HTMLにボタンを配置します。このボタンのonclick属性には、複数の関数を呼び出すための関数を指定します。

<button type="submit" onclick="callTwoOtherFunctions()"> 呼び出す </button>

手順2：ラッパー関数を作成する

上記のボタンでは、「onclick」内に指定したcallTwoOtherFunctions()という関数を通じて、他の2つの関数を呼び出しています。

function callTwoOtherFunctions(){
    fun1();
    fun2();
}

このように、ラッパー関数の中でfun1()とfun2()を順に呼び出すことで、1回のクリックで両方の関数を実行できます。以下が完全なコード例です。

コード例

<!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>
<body>
<button type="submit" onclick="callTwoOtherFunctions()"> 呼び出す
</button>
<script>
    function callTwoOtherFunctions(){
        fun1();
        fun2();
    }
    function fun1(){
        console.log("Function1()")
    }
    function fun2(){
        console.log("Function2()")
    }
</script>
</body>
</html>

プログラムの実行方法

上記のプログラムを実行するには、ファイル名を「index.html」など任意の名前で保存し、VS Codeエディタでそのファイルを右クリックします。表示されるメニューから「Open with Live Server」を選択してください。

実行結果

ブラウザには次のような画面が表示されます。

【JavaScript】onclickイベントで2つ以上の関数を実行する方法

「呼び出す」ボタンをクリックすると、開発者ツールのコンソールに以下の出力が表示されます。

Function1()
Function2()

【JavaScript】onclickイベントで2つ以上の関数を実行する方法

補足：addEventListenerを使う方法

HTML属性に直接JavaScriptを書きたくない場合は、addEventListenerを使っても同じ処理を実現できます。

document.getElementById("myButton").addEventListener("click", () => {
    fun1();
    fun2();
});

まとめ

onclickで複数の関数を実行する最も簡単な方法は、ラッパー関数を作成しその中で各関数を呼び出すことです。この方法ならコードの可読性と保守性も高まり、後から処理を追加するのも容易になります。

  1. 【JavaScript】同じ関数を使う2つ以上のリンクでonclickが機能しない原因と解決法

    同じ関数を使う2つ以上のリンクでonclickが機能しない場合は、JavaScriptのdocument.querySelectorAll()を使用しましょう。以下に具体的なコード例を示します。 解決策：querySelectorAll()ですべての要素を取得する document.getElementById()やdocument.querySelector()は、一致する要素のうち最初の1件しか取得できません。そのため、複数のリンクや要素に同じイベントを設定しようとしても、一部しか動作しないことがあります。 document.querySelectorAll()は、指定したセレクターに一

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

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