HTML5を勉強したい

HTML5

onclickとはどんな属性か

onclick属性は、クリックというユーザの行動に関係したイベント属で、ユーザが要素をクリックした時にどのような処理を行うかを設定することができます。

onclick属性は、値に、JavaScriptで設定した関数名を指定するなど、JavaScriptに紐付けて使うことが多い属性です。

onclick属性を設定した要素をクリックされると、onclick属性の値に指定したJavaScriptの関数が実行される、といった使い方が多いです。

onclick属性を指定した具体例


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

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

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

HTMLでのa要素をクリックした時に実行したい関数(ここではdoAlert())を、onclick属性の値に指定しています。関数doAlert()の実行内容はアラート画面の出現です。

関数を複数指定して、それらを同時に実行させることもできます。下記は関数を2つ指定した場合の例です。

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

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

関数を複数指定する場合は「;」(セミコロン)で区切ります。今回は関数を2つ指定しています。

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