HTMLの要素のonclick属性の使い方【現役エンジニアが解説】

PROGRAM

今回は、HTMLの要素のonclick属性の使い方について、処理を直接書く場合と関数を実行する場合に分け、簡単に解説していきます。

処理を直接書く場合

onclick属性には、JavaScriptの処理を書くことができます。

処理を複数実行する場合には、;(セミコロン)で区切って書いていきます。

<button type="button" onclick="location.href='https://www.google.com/';">グーグル</button>

上記のコードでは、ボタンがクリックされると、グーグルのページに遷移させています。

関数を実行する場合

onclick属性では、JavaScriptの関数を呼び出すことも可能です。

特に処理が複数となる場合には、直接書かずに、関数にまとめることが多いです。

<button type="button" onclick="google();">グーグル</button>
<script>
    function google(){
        if (!window.confirm("グーグルに移動しますか?")) {return;}
        location.href='https://www.google.com/';
    }
</script>

上記のコードでは、ボタンクリック時、確認ダイアログでOKが選択された場合にグーグルのページに遷移させています。

対象がリンクの場合

aタグでは、href属性に値がないとリンクに見えなくなってしまいます。

aタグでonclick属性を使う場合には、href属性にも”javascript:void(0);”を指定します。

<a href="javascript:void(0);" onclick="google();">グーグル</a>
<script>
    function google(){
        if (!window.confirm("グーグルに移動しますか?")) {return;}
        location.href='https://www.google.com/';
    }
</script>

上記のコードでは、aタグのリンクの見た目を維持したまま、aタグクリック時、確認ダイアログでOKが選択された場合にグーグルのページに遷移させています。