はなぜ私のJSコードは、ランダムな色ジェネレータのブラウザ

に動作していない私が言うコンソールにエラーがあります。ここでははなぜ私のJSコードは、ランダムな色ジェネレータのブラウザ

Uncaught TypeError: Cannot read property 'addEventListener' of null at (index):14

を分析するための私のコードです：

<html> 
 
    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Quicksand" /> 
 
    <head> 
 
    <script type="text/javascript"> 
 
    var div = document.getElementById('text'), 
 
\t \t randomColor = function(e) { 
 
     var hex = Math.floor(Math.random() * 0xFFFFFF), 
 
      res = e.target, 
 
      result = "#" + hex.toString(16); 
 
     res.style.backgroundColor = result; 
 
     res.innerHTML = result; 
 
    \t }; 
 
div.addEventListener('mouseover', randomColor); 
 
    </script> 
 
    <style> 
 
     #text{ 
 
     width: 1000px; 
 
     height: 500px; 
 
     text-align: center; 
 
     font-size: 50px; 
 
     font-family: 'Quicksand'; 
 
    } 
 
     body{ 
 
     text-align: center; 
 
     font-family: 'Quicksand'; 
 
     margin-top: 0px; 
 
     margin-bottom: 0px; 
 
     margin-left: 0px; 
 
     margin-right: 0px; 
 
     } 
 
    </style> 
 
    </head> 
 
    <body> 
 
    <h1>Hover over me to get a random color!</h1> 
 
    <div id="text">Hex code</div> 
 
    </body> 
 
</html>

を

JSFIDDLEで動作しているためわかりません。誰か助けてください！

出典

2016-12-10 T. Bragg

はここにあなたのコードでスタックスニペットですが、様々なCSSで、jsファイルとhtmlに再配置されました。

元の単一のhtmlファイルでは、htmlの後にjsを含める必要があります。

var div = document.getElementById('text'), 
 
    randomColor = function(e) { 
 
    var hex = Math.floor(Math.random() * 0xFFFFFF), 
 
     res = e.target, 
 
     result = "#" + hex.toString(16); 
 
    res.style.backgroundColor = result; 
 
    res.innerHTML = result; 
 
    }; 
 
div.addEventListener('mouseover', randomColor);

#text { 
 
    width: 1000px; 
 
    height: 500px; 
 
    text-align: center; 
 
    font-size: 50px; 
 
    font-family: 'Quicksand'; 
 
} 
 
body { 
 
    text-align: center; 
 
    font-family: 'Quicksand'; 
 
    margin-top: 0px; 
 
    margin-bottom: 0px; 
 
    margin-left: 0px; 
 
    margin-right: 0px; 
 
}

<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Quicksand" /> 
 

 
<h1>Hover over me to get a random color!</h1> 
 
<div id="text">Hex code</div>

出典

2016-12-10 05:07:07

ありがとうございました。私は今それを手に入れました！ –

-1

ブラウザでコードを実行する際の問題は、スクリプトが先頭タグにあるため、DOMの前にロードされることです。 Jsfiddleでは、スクリプトはDOMの後に読み込まれます。したがって、<body>タグを終了する直前にスクリプトを配置する必要があります。

その常に良い（提案上部の1がこれ以上必要とされていないとして）コード

$(document).ready(function() { 
    // Handler for .ready() called. 
});

かをラップする

$(function() { ... });

あなたはjQueryのを使用している場合。

純粋ジャバスクリプトの場合

document.addEventListener("DOMContentLoaded", function(){ 
    // Handler when the DOM is fully loaded 
});

で

場合、またはそれがお役に立てば幸いです。

編集：コードを追加しました（ボディが終了する前にだけスクリプトタグを配置）

<html> 
    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Quicksand" /> 
    <head> 

<style> 
    #text{ 
    width: 1000px; 
    height: 500px; 
    text-align: center; 
    font-size: 50px; 
    font-family: 'Quicksand'; 
} 
    body{ 
    text-align: center; 
    font-family: 'Quicksand'; 
    margin-top: 0px; 
    margin-bottom: 0px; 
    margin-left: 0px; 
    margin-right: 0px; 
    } 
</style> 
</head> 
    <body> 
    <h1>Hover over me to get a random color!</h1> 
    <div id="text">Hex code</div> 
    <script type="text/javascript"> 
    var div = document.getElementById('text'), 
    randomColor = function(e) { 
    var hex = Math.floor(Math.random() * 0xFFFFFF), 
     res = e.target, 
     result = "#" + hex.toString(16); 
    res.style.backgroundColor = result; 
    res.innerHTML = result; 
    }; 
div.addEventListener('mouseover', randomColor); 
    </script> 
    </body> 
</html>

出典

2016-12-10 05:01:29

湯は、コード例を追加することができますか？ –

JQueryは '$（function（）{...}）;を必要とします;' ready（） 'メソッドは非常に残念です。 – Soviut

はい、そうです。 @ソビエト –

はなぜ私のJSコードは、ランダムな色ジェネレータのブラウザ

答えて

関連する問題