Risultato di getElementById è nullo?

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

  •  28-09-2019
  •  | 
  •  

Domanda

Proprio alle prese con una classe JavaScript utilizzato come metodo per qualche codice cometishian, come devo un costruttore per questo codice? Il codice seguente non è valido: 

<!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 è nullo

È stato utile?

Soluzione

Questo è perché si sta eseguendo lo script prima che la pagina è pronta, cioè chart1 non esiste ancora quando si chiama new ganttChart("chart1");. Avvolgere il window.onload = function() { } codice all'interno o correre in fondo alla pagina.

Altri suggerimenti

Il problema è che lo script è in esecuzione troppo presto, è alla ricerca di un elemento che non esiste nel DOM ancora , sia eseguire il onload script o posizionarlo alla fine della <body> così il vostro elemento id="chart1" è lì per essere trovato quando viene eseguito.

Il problema è che si esegue il codice prima che la pagina è ancora caricato, e quindi l'elemento DOM con id chart1 non esiste al momento in cui viene eseguito il codice.

utilizzo 

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

Si noti che usare window.onload del genere avrà la precedenza su tutte le dichiarazioni window.onload precedentemente indicati. Qualcosa lungo le seguenti linee sarebbe meglio: 

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

onload Inoltre, le immagini di Al FINO A sono a pieno carico non si innescherà, considerare l'utilizzo di jQuery & $ (document) .ready o simili.

:)

Saluti, Pedro

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top