web-dev-qa-db-ja.com

キャッチされないTypeError：nullのプロパティ 'onclick'を設定できません

単純なチェックボックスを使用してウィンドウアラートをポップアップ表示するのに問題がありますが、その理由を理解することはできません。基本的なJavaScriptとHTMLは次のとおりです。

var blue_box=document.getElementById("color-blue");
function colorFunction() {
    window.alert("This color is blue!");
}

blue_box.onclick=colorFunction;
<form action="" method="POST" id="form">
    <fieldset>
        <legend> Form!</legend>
        <ul>
            <li><label><input type="checkbox" 
                    name="color" 
                    value="blue" 
                    id="color-blue" />
                    blue</label>
                </li>
                <li><label><input type="checkbox" 
                    name="color"  
                    value="red" 
                    id="color-red" />
                    red</label>
                </li>
                <li><label><input type="checkbox" 
                    name="color" 
                    value="yellow" 
                    id="color-yellow" />
                    yellow </label>
                </li>
            </ul>
        </fieldset>
    </form>

スロー：Uncaught TypeError: Cannot set property 'onclick' of null 下

blue_box.onclick=colorFunction;

私のコードにこのエラーの目に見える理由はありますか？

javascripteventshandler
27
user1279662

コードをラップする

window.onload = function(){ 
    // your code 
};
79
maximkou

すべての<script ...></script>タグの前に</body>タグ。おそらく、jsはDOMのオブジェクトに構築する前にアクセスしようとしています。

11
Tifa

だから私は同様の問題を抱えていたので、bodyタグを閉じた後にJSファイルにscriptタグを付けることでそれを解決することができました。

参照するものがあることを確認するからだと思いますが、完全にはわかりません。

4
PaintHat

要素が読み込まれた後にjavascriptが実行されていることを確認します。おそらく、タグの直前にjsファイル呼び出しを置くか、スクリプトでdefer属性を使用してみてください：<script src="app.js" defer></script> domがロードされた後に実行されます。

3
Beto

_"blue_box"_はnullです-これが実行されているときに_"id='blue'"_が存在する場合、それが何であれポジティブですか？

console.log(document.getElementById("blue")) in chromeまたはfirebugでFFを試してください。_'blue'_要素がロードされる前にスクリプトが実行されている可能性があります。この場合、追加する必要がありますページがロードされた後のイベント（_window.onload_）。

3
Collin Green

Document.getElementById（ "blue"）は存在しますか？そうでない場合、blue_boxはnullに等しくなります。 nullの何かにonclickを設定することはできません

0
ncremins