HTMLでのJavaScriptの関数の呼び出し方法【現役エンジニアが解説】
今回は、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という関数を呼び出します。