Warum ist mein JS-Code für zufällige Farbe Generator nicht im Browser arbeiten

ich einen Fehler in der Konsole haben, der sagt:Warum ist mein JS-Code für zufällige Farbe Generator nicht im Browser arbeiten

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

Hier ist mein Code zu analysieren:

<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>

Ich verstehe nicht, weil es in JSFIDDLE funktioniert. Jemand bitte helfen!

Quelle

2016-12-10 T. Bragg

Hier ist ein Stapel Schnipsel mit Ihrem Code aber mit den verschiedenen CSS, JS und HTML neu arrangiert.

In Ihrer ursprünglichen einzelnen HTML-Datei sollten Sie Ihre js nach dem HTML einfügen.

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>

Quelle

2016-12-10 05:07:07

Danke Mann, ich habe es jetzt! –

-1

Das Problem mit dem Ausführen des Codes im Browser ist, dass Ihr Skript im head-Tag ist, so dass es vor dem DOM geladen wird. In Jsfiddle wird das Skript nach dem DOM geladen. Sie müssen also das Skript kurz vor dem Ende des <body> Tags setzen.

Es ist immer besser, den Code zu wickeln

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

oder (wie vorgeschlagen obere ist nicht mehr erforderlich)

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

wenn Sie jQuery verwenden.

oder wenn im Falle von reinem Javascript

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

Hoffe, es hilft.

Edit: Hinzugefügt Code (einfach den Tag-Skript platziert vor Körperenden)

<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>

Quelle

2016-12-10 05:01:29

könnte yu ein Codebeispiel hinzufügen? –

JQuery braucht nur '$ (function() {...});' Die 'ready()' Methode ist sehr alt. – Soviut

Ja, Sie haben Recht. @Soviut –

Warum ist mein JS-Code für zufällige Farbe Generator nicht im Browser arbeiten

Antwort

Verwandte Themen