HTMLのonclickが動作しなくて5時間悩んだから僕の５時間をこの記事１つにまとめる。

初めに

本日、とあることでHTMLのonclickを使用することになりました。
HTMLのonclick要素は、その要素がクリックされたときにjavascriptの関数を発火させることができる便利な機能。
javascriptからやるにはイベントリスナーを参照する必要があり3行クライのコードが必要だけれど、onclickを使用すると何文字かで完成！
これを使わない手はありません。

コード1

僕は以下のようなコードを立てました。

<button onclick="onclick();">絶対押すなよ</button>

function onclick(){
    var i = 0
    while(i<20){
        if (i%15 == 0){
            alert("＾＠＾");
        }
        else if (i%3 == 0){
            alert("＾￥＾");
        }
        else if (i%5 == 0){
            alert("＾ー＾");
        }
        else {
            alert(i);
        }
    }
}

ただ、動きません。

対処法

onclickの;を消す。
onclickでは、javascriptの関数の;は必要ないのです。

<button onclick="onclick()">絶対押すなよ</button>

function onclick(){
    var i = 0
    while(i<20){
        if (i%15 == 0){
            alert("＾＠＾");
        }
        else if (i%3 == 0){
            alert("＾￥＾");
        }
        else if (i%5 == 0){
            alert("＾ー＾");
        }
        else {
            alert(i);
        }
    }
}

あれ、でも動かない...
なぜだ。

対処法

関数名を直す！

以上のコードを実行すると、エラーが出ます。
なぜか？
関数名がonclickだから！！！

以下のように直しましょう。

<button onclick="onclicked()">絶対押すなよ</button>

function onclicked(){
    var i = 0
    while(i<20){
        if (i%15 == 0){
            alert("＾＠＾");
        }
        else if (i%3 == 0){
            alert("＾￥＾");
        }
        else if (i%5 == 0){
            alert("＾ー＾");
        }
        else {
            alert(i);
        }
    }
}

これで正しく動くようになりました。

考察

なぜ、関数名がonclickだと動かなかったのか。
ここからはあくまで考察ですが。おそらくonclick要素で、関数onclickを指定するとonclickイベントが発生するのではないでしょうか。
onclickをonmouseoutに変えてみましたが関数名がonmouseoutだと発火しませんでした。

終わりに

5時間の成果。