TypeError：tempTableがnullです

Question

低温と高温度を入力するように指示するスクリプトを作成しています。温度の追加をクリックすると、今日の日時、低温、高温、および低気圧と高温の平均が表示されます。これらのtempsに入るたびに、前の前の日付がそのtempsと平均で表示されます。私がコードを実行しようとすると、私はこれを得る：TypeError: tempTable is null。助言がありますか？

(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

エラーは、あなたのコードがその時点で実行されたときに、あなたのJSコードの前にロードDOM要素にレンダリングされているためtemptableはおそらく設定されていなかったことを意味します。

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

またDomContentLoaded代わりにwindow.onloadでinit()を実行します。あなたはマークアップであなたがtempTable` `idを持つ要素を持っていない場合は、エラーを取得するには（あなたのコードに基づいて）

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