JavaScriptのイベントで引数を指定して関数を呼び出す方法をやさしく解説！初心者向け完全ガイド

新人と先輩の会話形式で理解しよう

新人

「ボタンをクリックしたときに引数を渡して関数を呼び出すにはどうすればいいんですか？」

先輩

「addEventListenerを使って関数を呼び出すときに引数を渡す方法がありますよ。それでは実際のコードを見ながら説明していきます！」

1. イベントで関数を呼び出す基本の方法

JavaScriptのaddEventListenerを使ってイベントを処理するとき、関数に引数を渡すには無名関数（アロー関数や匿名関数）を利用するのが一般的です。

次の構文で引数を渡すことができます：

要素.addEventListener("イベント種類", function() { 関数名(引数); });

これにより、イベント発生時に関数へ任意の引数を渡して動作させることができます。

2. 引数を指定してメッセージを変更する例

次の例では、ボタンをクリックしたときに引数を使ってメッセージを変更します。


<button id="button1">ボタン1をクリック</button>
<button id="button2">ボタン2をクリック</button>
<p id="output"></p>

<script>
function showMessage(message) {
    let output = document.querySelector("#output");
    output.innerHTML = "表示されたメッセージ: " + message;
}

let button1 = document.querySelector("#button1");
let button2 = document.querySelector("#button2");

button1.addEventListener("click", function() {
    showMessage("ボタン1がクリックされました！");
});

button2.addEventListener("click", function() {
    showMessage("ボタン2がクリックされました！");
});
</script>

ブラウザ表示

このコードでは、次のように動作します：

ボタン1またはボタン2がクリックされると、それぞれの無名関数が実行されます。
無名関数の中でshowMessage関数が引数付きで呼び出されます。
指定されたメッセージが画面に表示されます。

3. 引数を動的に変更する例

次に、入力フォームに入力された値を引数として関数に渡す例を見てみましょう。


<input type="text" id="inputField" placeholder="メッセージを入力してください">
<button id="displayButton">メッセージを表示</button>
<p id="dynamicOutput"></p>

<script>
function displayMessage(message) {
    let dynamicOutput = document.querySelector("#dynamicOutput");
    dynamicOutput.innerHTML = "入力されたメッセージ: " + message;
}

let displayButton = document.querySelector("#displayButton");

displayButton.addEventListener("click", function() {
    let inputField = document.querySelector("#inputField");
    displayMessage(inputField.value);
});
</script>

ブラウザ表示

この例の動作は以下の通りです：

入力フォームに任意のメッセージを入力します。
「メッセージを表示」ボタンをクリックすると、入力された値が引数としてdisplayMessage関数に渡されます。
引数として渡されたメッセージが画面に表示されます。

4. 引数に複数の値を渡す例

引数として複数の値を関数に渡すこともできます。次の例では、背景色とテキストを引数として渡し、ボタンをクリックするたびに背景色とメッセージが変わるようにします。


<button id="colorButton1">赤い背景</button>
<button id="colorButton2">青い背景</button>
<p id="colorOutput">ここが変更されます</p>

<script>
function changeColorAndMessage(color, message) {
    let colorOutput = document.querySelector("#colorOutput");
    colorOutput.style.backgroundColor = color;
    colorOutput.innerHTML = message;
}

let colorButton1 = document.querySelector("#colorButton1");
let colorButton2 = document.querySelector("#colorButton2");

colorButton1.addEventListener("click", function() {
    changeColorAndMessage("red", "背景色が赤になりました！");
});

colorButton2.addEventListener("click", function() {
    changeColorAndMessage("blue", "背景色が青になりました！");
});
</script>

ブラウザ表示

この例では、次のように動作します：

ボタン1をクリックすると背景色が赤に変わり、指定したメッセージが表示されます。
ボタン2をクリックすると背景色が青に変わり、対応するメッセージが表示されます。

5. 関数内で引数を計算に使う例

次の例では、引数として渡された2つの数値を加算し、その結果を表示する関数を作成します。


<input type="number" id="number1" placeholder="数値1を入力">
<input type="number" id="number2" placeholder="数値2を入力">
<button id="calculateButton">計算する</button>
<p id="sumResult"></p>

<script>
function calculateSum(num1, num2) {
    let sumResult = document.querySelector("#sumResult");
    let sum = num1 + num2;
    sumResult.innerHTML = "計算結果: " + sum;
}

let calculateButton = document.querySelector("#calculateButton");

calculateButton.addEventListener("click", function() {
    let number1 = parseFloat(document.querySelector("#number1").value);
    let number2 = parseFloat(document.querySelector("#number2").value);
    calculateSum(number1, number2);
});
</script>

ブラウザ表示

このプログラムでは、2つの入力フィールドに数値を入力し、「計算する」ボタンを押すとその合計が表示されます。calculateSum関数に引数として2つの数値が渡され、加算された結果が表示されます。

6. アロー関数を使って引数を渡す方法

JavaScriptでは、無名関数の代わりにアロー関数を使って引数を渡すこともできます。コードを短く書けるため、最近ではよく使われる書き方です。

基本的な書き方は次の通りです：

要素.addEventListener("click", () => 関数名(引数));

この書き方を使うことで、よりシンプルにイベント処理と引数の受け渡しができます。


<button id="arrowButton">クリック</button>
<p id="arrowOutput"></p>

<script>
function showText(text) {
    document.querySelector("#arrowOutput").innerHTML = text;
}

let arrowButton = document.querySelector("#arrowButton");

arrowButton.addEventListener("click", () => showText("アロー関数で呼び出しました"));
</script>

このように、アロー関数を使えばコードを簡潔にしながら、引数付きの関数を呼び出すことができます。