O resultado do getElementById é nulo?

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

  •  28-09-2019
  •  | 
  •  

Pergunta

Apenas lutando com uma classe JavaScript sendo usada como um método para algum código COMETISHIAN, como tenho um construtor para este código? O código a seguir é invá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 é nulo

Foi útil?

Solução

Isso porque você está executando o script antes que a página esteja pronta, ou seja, chart1 ainda não existe quando você liga new ganttChart("chart1");. Enrole o código dentro window.onload = function() { } ou execute -o na parte inferior da página.

Outras dicas

O problema é que seu script está indo muito cedo, está procurando um elemento que não existe no DOM ainda, execute seu script onload, ou coloque -o no final do <body> então seu id="chart1" O elemento está a ser encontrado quando é executado.

O problema é que você executa seu código antes que a página já tenha carregada e, portanto, o elemento DOM com o Chart1 de ID1 ainda não existe no momento em que o código é executado.

usar

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

Observe que o uso do Window.onload como esse substituirá todas as declarações de Window.onload anteriormente. Algo ao longo das seguintes linhas seria melhor:

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

Além disso, as imagens AL são totalmente carregadas onload não acionam, considere o uso de jQuery & $ (documento) .ready ou similar.

:)

Atenciosamente, Pedro

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top