Ergebnis getElementById ist null?

StackOverflow https://stackoverflow.com/questions/4277026

  •  28-09-2019
  •  | 
  •  

Frage

Nur mit einer Javascript-Klasse kämpft als Methode für einige cometishian Codes verwendet wird, wie habe ich einen Konstruktor für diesen Code? Der folgende Code ist ungültig: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">    
<html>    
    <head>    
        <link rel="Stylesheet" href="gStyle.css" />            
        <script type="text/javascript" language="javascript">    
            // Gantt chart object
            function ganttChart(gContainerID) {    
                this.isDebugMode = true;
                this.gContainer = document.getElementById(gContainerID);    
                if (this.isDebugMode) {
                    this.gContainer.innerHTML += "<div id=\"gDebug\">5,5 | 5.1</div>";
                }    
            }                
            var myChart = new ganttChart("chart1");                  
        </script>            
    </head>    
</html>    
<body>    
    <div id="chart1" class="gContainer"></div>    
</body>    
</html>

this.gContainer heißt null

War es hilfreich?

Lösung

Das ist, weil Sie das Skript ausgeführt werden, bevor die Seite fertig ist, das heißt chart1 noch nicht existieren, wenn Sie new ganttChart("chart1"); nennen. Wickeln Sie den Code in window.onload = function() { } oder führen Sie es am unteren Rand der Seite.

Andere Tipps

Das Problem ist, dass Ihr Skript zu früh ausgeführt wird, sieht es für ein Element, das nicht in dem DOM existiert noch , entweder Ihr Skript onload laufen, oder legen Sie es am Ende der <body> so Ihr id="chart1" Element ist dort zu finden, wenn es ausgeführt wird.

Das Problem ist, dass Sie Ihren Code ausführen, bevor die Seite noch geladen ist und somit das DOM-Element mit id chart1 existiert zur Zeit nicht der Code ausgeführt wird.

Verwendung 

window.onload = function(){myChart = new ganttChart("chart1");};

Beachten Sie, dass mit window.onload wie das wird Vorrang vor allen zuvor genannten window.onload Erklärungen. Etwas in den folgenden Zeilen wäre besser: 

<script type="text/javascript">
var prevOnload = window.onload || function () {};
window.onload = function () {
prevOnload();
// do your stuff here
};
</script>

Auch werden, bis al Bilder vollständig geladen onload wird nicht auslösen, denken Sie daran mit Jquery & $ (document) .ready oder ähnliches.

:)

Viele Grüße, Pedro

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top