JavaScriptのonclickの動作がよくわからない

Question

###前提・実現したいこと
JavaScriptにて、onClickを使用するとイベントが発生しないことがある。どのようにすればイベントが実行されるのかよくわからない。

###該当のソースコード
以下の場合では#q5にbigというクラスが与えられる。

var q5 = document.getElementById("q5");

   q5.classList.add("big");

以下の場合では#q5にbigというクラスが与えられない。

    var q5 = document.getElementById("q5");

    q5.onClick = function(){
        q5.classList.add("big");
    }

この2つの違いがよくわかりません。まだ勉強し始めたばかりのため、できるだけわかりやすいアドバイスをお願いします。

Answer 1

「onClick」を「onclick」（Cを小文字）にしてみてください。

Comments

[vnsa7221]

大文字のC部分を小文字に修正したらイベントが実行されました。
大変恥ずかしいです・・・。
もっとしっかりと勉強したいと思います。
回答していただきありがとうございました。

Answer 2

firefoxでは「q5.onclick=function(e){ this.classList.add("big"); };」のようにonClickを全部小文字にすると動きましたが。

また、すでにclassListに登録済みのclassは追加されないようです。

<div id='q5' class='big'>

にはなっても

<div id='q5' class='big big'>

のようにはならない、ということですね。

Comments

[vnsa7221]

大文字のC部分を小文字に修正したらイベントが実行されました。
大変恥ずかしいです・・・。
もっとしっかりと勉強したいと思います。
回答していただきありがとうございました。
今回は回答が早かったtkturboさんをベストアンサーにさせていただきたいと思います。