【JavaScript】クリック時にイベントを実行する onclick()

onclick属性とは？
onclick属性の使い方
- onclick属性は関数の複数指定も可能
- onclick属性で引数を渡す

onclick属性とは？

onclick属性とは、ユーザが要素をクリックした際に起動する処理を指定するイベント属性です。
ボタンをクリックした際にメッセージボックスを表示させたり、別のテージに飛ばすといった処理が可能になります。

onclick属性の使い方

基本的な使い方は、HTMLに以下のようにonclickを指定します。

下記のコードではボタンを作成し、onclick属性を指定します。ボタンをクリックすると、alertが表示されます。

//onclickを指定
<input type="button" value="button" onclick="sample()">

function sample(){
  alert("sample");
}

ボタンを押すとアラートが表示される

onclick属性は関数の複数指定も可能

onclick属性は複数の関数を指定することもできます。

記述方法は下記のように「;（セミコロン）」で関数を区切ります。

サンプルコードではボタンをクリックした際に、次の２つの処理が動きます。

✔︎一つ目の処理（sampleAlert();）が、メッセージボックスを表示

✔︎二つ目の処理（sampleTextchenge）がボタンの「 ON」を「OFF!」に変化させる

<div id="text-button" onclick="sampleAlert();sampleTextchenge()">ON</div>

<script>
     function sampleAlert() {
      alert("ボタンがクリックされました！");
    }
    function sampleTextchenge() {
      document.getElementById("text-button").textContent="OFF!";
    }
</script>

ONボタンを押すことで、アラートメッセージが表示され

okボタンを押すと、ONボタンがOFF！に変わり、二つの処理が実行されます。

onclick属性で引数を渡す

onclick属性で任意の引数を渡すことも可能です。

サンプルコードでは、引数の数字によって表示する値を出し分けています。

<div id="text-btn1" onclick="sampleAlert(1)">Btn1</div>
<div id="text-btn2" onclick="sampleAlert(2)">Btn2</div>

<script>
    function sampleAlert(num) {
    if (num === 1) {
      alert("Btn1がクリックされました！");
    } else {
      alert("Btn2がクリックされました！");
    } 
  }
</script>

ボタンがふたつ表示され、