TypeError: tempTable ist null

Question

Ich schreibe ein Skript, das Sie auffordert, eine niedrige und eine hohe Temperatur einzugeben. Wenn Sie auf "Temperaturen hinzufügen" klicken, werden das aktuelle Datum, die niedrige Temperatur und die hohe Temperatur und der Durchschnitt von niedrigen Temperaturen und hohen Temperaturen angezeigt. Jedes Mal, wenn Sie diese Zeitpunkte eingeben, wird das vorherige Datum vor dem letzten mit diesen Temps und den Durchschnittswerten angezeigt. Wenn ich versuche, den Code auszuführen, bekomme ich Folgendes: TypeError: tempTable is null. Irgendwelche Vorschläge?

(function() { 
 
     //Array to hold temp data 
 
     var temperatures = new Array(); 
 

 
     // function which updates the array 
 
     function addTemp() { 
 
     var lowTemp = document.getElementById("lowTemp").value; 
 
     var highTemp = document.getElementById("highTemp").value; 
 
     if (lowTemp.length === 0 || highTemp.length === 0) { 
 
      alert("Valid low and high temperatures must be entered!"); 
 
     } else { 
 
      document.getElementById("output").style.display = "block"; 
 
      // Add new temperatures to the array 
 
      // Current date 
 
      var d = new Date(); 
 
      if (temperatures.length == 0) { 
 
      // Current date if it is 1st temperature 
 
      temperatures.push(new Array(d.getMonth(), d.getDate(), d.getFullYear(), lowTemp, highTemp)); 
 
      } else { 
 
      // 1 day before last date 
 
      newDate = temperatures[temperatures.length - 1][1] - 1; 
 
      temperatures.push(new Array(d.getMonth(), newDate, d.getFullYear(), lowTemp, highTemp)); 
 
      } 
 
      // Create the output table 
 
      var tempTable = document.getElementById("tempTable"); 
 
      tempTable.innerHTML = "<tr><th>Date</th><th>Low Temperatures</th><th>High Temperatures</th></tr>"; 
 
      // Loop over the array and create the table 
 
      // Also calculate the averages 
 
      var avgLow = 0; 
 
      var avgHigh = 0; 
 
      temperatures.forEach(function(entry) { 
 
      var newRow = document.createElement('tr'); 
 
      newRow.innerHTML = '<td>' + entry[0] + '/' + entry[1] + '/' + entry[2] + '</td><td align="right">' + entry[3] + '</td><td align="right">' + entry[4] + '</td>'; 
 
      tempTable.appendChild(newRow); 
 
      avgLow += parseInt(entry[3]); 
 
      avgHigh += parseInt(entry[4]); 
 
      }); 
 
      // Add the row for average 
 
      avgLow /= temperatures.length; 
 
      avgHigh /= temperatures.length; 
 
      avgLow = avgLow.toFixed(1) 
 
      avgHigh = avgHigh.toFixed(1) 
 
      var newRow = document.createElement('tr'); 
 
      newRow.innerHTML = '<td>Averages</td><td align="right">' + avgLow + '</td><td align="right">' + avgHigh + '</td>'; 
 
      tempTable.appendChild(newRow); 
 
      //Add row for lowest temp 
 
      var minTemp = Math.min.apply(lowTemp.value); 
 
      var key = lowTemp.indexOf(d); 
 
      var newRow = document.createElement('tr'); 
 
      newRow.innerHTML = '<td colspan="3"> The lowest temp of' + minTemp + 'occured on' + key + '</td>'; 
 
      tempTable.appendChild(newRow); 
 
     } 
 
     return false; 
 
     } 
 

 
     function init() { 
 
      'use strict'; 
 
      document.getElementById('theForm').onsubmit = addTemp; 
 
     } // End of init() function. 
 
     window.onload = init; 
 
    })();

Answer 1

Der Fehler bedeutet, dass, wenn Ihr Code zu diesem Zeitpunkt ausgeführt temptable nicht möglicherweise eingestellt wurde, weil Sie wird JS-Code vor dem DOM-Elemente geladen Rendering.

var tempTable = document.getElementById("tempTable");

Auch init() in DomContentLoaded ausführen statt window.onload.

document.addEventListener("DOMContentLoaded", function(event) { init(); });