Résultat de getElementById est nul?

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

  •  28-09-2019
  •  | 
  •  

Question

Juste aux prises avec une classe Javascript utilisé comme méthode pour un code cometishian, comment puis-je avoir un constructeur pour ce code? Le code suivant est incorrect: 

<!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 est nul

Était-ce utile?

La solution

C'est parce que vous exécutez le script avant que la page est prête, à savoir chart1 n'existe pas encore lorsque vous appelez new ganttChart("chart1");. Enveloppez l'intérieur window.onload = function() { } de code ou exécuter en bas de la page.

Autres conseils

Le problème est que votre script est en cours d'exécution trop tôt, il cherche un élément qui n'existe pas dans les DOM encore , soit exécuter votre onload script, ou placez-le à la fin de la <body> de sorte que votre élément id="chart1" est là pour trouver quand il fonctionne.

Le problème est que vous exécutez votre code avant que la page est encore chargé, et donc l'élément DOM avec id chart1 n'existe pas au moment où le code est exécuté.

utilisation 

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

Notez que l'utilisation window.onload comme ça remplace toutes les déclarations de window.onload énoncées précédemment. Quelque chose le long des lignes suivantes serait mieux: 

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

En outre, jusqu'à ce images sont al onload entièrement chargés ne déclencheront pas, envisagez d'utiliser jquery & $ (document) .ready ou similaire.

:)

Cordialement, Pedro

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top