HTMLでのJavaScriptの関数の呼び出し方法【現役エンジニアが解説】

PROGRAM

今回は、HTMLでのJavaScriptの関数の呼び出し方法について、関数の定義と呼び出しに分け、簡単に解説していきます。

関数の定義

関数を呼び出す前に、まずは関数の定義が必要です。

関数は”function 関数名(){}”の形式でscriptタグ内に定義します。

function hoge(){
    alert("ほげ");
}

上記のコードでは、”ほげ”というダイアログを表示するhogeという関数を定義しています。

関数の呼び出し

関数を呼び出すには、要素のonclick属性等で呼び出します。

on~属性に”関数名();”を指定すると、要素でイベントが発生した際に呼び出されます。

<button type="button" id="hogebtn" onclick="hoge();">ほげ</button>

上記のコードでは、”ほげ”というボタンがクリックされたときに、hogeという関数を呼び出します。

イベントハンドラの登録

関数の呼び出しは、要素のon~属性だけではなくJavaScriptからも可能です。

要素のaddEventListenerメソッドの第一引数にイベント名、第二引数に関数を指定します。

document.getElementById("hogebtn").addEventListener("click", hoge);

上記のコードでは、hogebtnというIDを持つ要素にクリックイベントが発生した際にhogeという関数を呼び出します。