HTML5

on Note

onclick属性 クリックイベントを提供する

onclick属性は、ユーザが要素をクリックした時、そのような処理を行うかを設定する際に用います。クリックというイベントが発生した時に反応するイベントハンドラ属性です。

onclick属性は、JavaScriptに紐付けて使うことが多い属性です。主に、onclick属性を設定した要素がクリックされると、onclick属性の値に指定したJavaScriptの関数が実行される、といった流れになります。

ここでは、このようにJavaScriptと一緒に用いた例で説明します。

onclick属性の使用例

onclick属性にJavaScriptを紐付けて、クリックした時にアラート画面が出る処理を例にあげます。

JavaScript側で、アラート画面が出る関数を作っておき、onclick属性の値でその関数名を指定することで動作します。

<a href="#" onclick="doAlert()">ボタン</a>

<script>
    function doAlert(){
        alert("アラート画面が表示されました。");
    }
</script>

JavaScript側で、アラート画面が表示される処理を doAlertという関数名で書いています。そして a要素の onclick属性の値でその関数名を指定します。

これで次のような動作をします。a要素であるボタンをクリックすると、アラート画面が表示されます。

ボタンボタンをクリックするとアラート画面が出ます。

2つの関数を同時に指定する

onclick属性で複数の関数を指定する場合、それぞれの関数名を ;(セミコロン)で区切ります

<a href="#" onclick="doAlert(); changeButton()" id="button2">ボタン</a>
                    
<script>
    function doAlert(){
        alert("アラート画面が表示されました。");
    }
    function changeButton() {
        document.getElementById("button2").textContent = "clicked";     //ボタンの文字を変更
    }
</script>

JavaScript側で、アラート画面の出現を指示する関数doAlert()と、クリックした際にボタンの文字が変化する関数changeButton()を記述しています。

下のボタンを押すと、アラート画面が出現して、その後ボタンの文字が変化します。

ボタンボタンをクリックするとアラート画面が出て、ボタンの文字が変わります。

関数doAlert()によってアラート画面が出現し、関数changeButton()によってボタンのテキストが変更されます。