Uncaught TypeError：ヌルのプロパティ 'onclick'を設定できません。

Question

私のウィンドウアラートを単純なチェックボックスでポップアップ表示させるのに問題があります。スロー

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> 
 
\t   <li><label><input type="checkbox" 
 
        name="color" 
 
        value="red" 
 
        id="color-red" /> 
 
        red</label> 
 
       </li> 
 
\t \t <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; 

の下に私のコードでこのエラーのために目に見える理由があります。ここでは、基本的なJavaScriptとHTMLですか？

Answer 1

document.getElementById（ "blue"）は存在しますか？そうでなければ、blue_boxはnullと等しくなります。あなたはヌルのものにonclickを設定することはできません

Answer 2

"blue_box"はnullです - これは実行中に"id='blue'"が存在することを前提としていますか？

try console.log(document.getElementById("blue"))ファイヤーバグのクロムまたはFFです。 'blue'要素がロードされる前にスクリプトが実行されている可能性があります。この場合、ページがロードされた後にイベントを追加する必要があります（window.onload）。

Answer 3

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

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

Answer 4

ラップコードは、必ずあなたのJavaScriptは、あなたの要素（複数可）をロードした後、おそらくちょうどタグの前のjsファイルの呼び出しを入れてみてくださいまたはスクリプトに延期属性を使用して実行されていることを確認しますそうですね：<script src="app.js" defer></script>これは、DOMがロードされた後にスクリプトが実行されるようにします。

Answer 5

で

Answer 6

私は同様の問題を抱えていました。クローズボディタグの後にJSファイルでscriptタグを入れて解決することができました。

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