Resultado de la getElemenById es nulo?

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

  •  28-09-2019
  •  | 
  •  

Pregunta

Sólo luchando con una clase de JavaScript que se utiliza como un método para algún código cometishian, ¿cómo puedo tener un constructor para este código? El siguiente código es válido: 

<!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 es nulo

¿Fue útil?

Solución

Esto se debe a que está ejecutando la secuencia de comandos antes de la página está lista, es decir chart1 aún no existe cuando se llama new ganttChart("chart1");. Envuelve el código dentro de window.onload = function() { } o bien puede hacerlo en la parte inferior de la página.

Otros consejos

El problema es que se ejecuta un script demasiado pronto, que está buscando un elemento que no existe en el DOM sin embargo , o bien ejecutar su onload guión, o colocarlo al final de la <body> por lo que su elemento id="chart1" está ahí para ser encontrado cuando se ejecuta.

El problema es que se ejecuta el código antes de que la página ha cargado todavía, y por lo tanto el elemento DOM con chart1 ID no existe en el momento en que se ejecuta el código.

uso 

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

Tenga en cuenta que el uso de esa window.onload anulará todas las declaraciones window.onload indicadas anteriormente. Algo a lo largo de las siguientes líneas sería mejor: 

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

onload Además, las imágenes col hasta que se carguen completamente cargados no se disparará, considerar el uso de jQuery y $ (document) ready o similar.

:)

Saludos, Pedro

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top