javascript - 时间变化时的时间和类的innerHTML' of null

Question

我不断收到 Uncaught TypeError: Cannot set property 'innerHTML' of null 在它告诉你日期、小时、分钟的时间。 "timeDiv2.innerHTML = '今天' + 今天 + ' ' + 小时 + ':' + 分钟 + 后缀 + '
';"这是一个总是出错的错误，或者当它关闭时。它会更改为错误或停留在同一行。我写得对吗？

var imgArray = new Array();

imgArray[0] = new Image();
imgArray[0].src = 'http://www.weebly.com/editor/uploads/1/1/3/4/11341626/custom_themes/599346900698327146/files/Gifs/OpenLightOff.png';

imgArray[1] = new Image();
imgArray[1].src = 'http://www.weebly.com/editor/uploads/1/1/3/4/11341626/custom_themes/599346900698327146/files/Gifs/OpenLightOn.gif';




var now = new Date();
var weekday = new Array(7);
weekday[0] = "Sunday";
weekday[1] = "Monday";
weekday[2] = "Tuesday";
weekday[3] = "Wednesday";
weekday[4] = "Thursday";
weekday[5] = "Friday";
weekday[6] = "Saturday";

var today = weekday[now.getDay()];

var dayOfWeek = now.getDay();
  var hour = now.getHours();
  var minutes = now.getMinutes();

  
  var suffix = hour >= 12 ? "PM" : "AM";
var checkTime2 = function() {
  

  var timeDiv2 = document.getElementById('timeDiv2');
  

  //add AM or PM
  

  // add 0 to one digit minutes
  if (minutes < 10) {
    minutes = "0" + minutes
  };

  if ((dayOfWeek == 1 || dayOfWeek == 2 || dayOfWeek == 3 || dayOfWeek == 4 || dayOfWeek == 0 ) && hour >= 6 && hour <= 21) {
    hour = ((hour + 11) % 12 + 1); //i.e. show 1:15 instead of 13:15

	timeDiv2.innerHTML = 'it\'s ' + today + ' ' + hour + ':' + minutes + suffix + '<br><center><img style="width:100%;top:0px;border-radius:10px;" src= '+imgArray[1].src+'></center>';
    timeDiv2.className = 'open';
  } 
  
  else if ((dayOfWeek == 5 || dayOfWeek == 6) && hour >= 6 && hour <= 22){
    hour = ((hour + 11) % 12 + 1);
	timeDiv2.innerHTML = 'it\'s ' + today + ' ' + hour + ':' + minutes + suffix + '<br><center><img style="width:100%;top:0px;border-radius:10px;" src= '+imgArray[1].src+'></center>';
    timeDiv2.className = 'open';
  } 
  
  else {
    if (hour == 0 || hour > 5) {
      hour = ((hour + 11) % 12 + 1); //i.e. show 1:15 instead of 13:15
    }

     timeDiv2.innerHTML = 'It\'s ' + today + ' ' + hour + ':' + minutes + suffix + '<br><center><img style="width:100%;top:0px;border-radius:10px;" src= '+imgArray[0].src+' ></center>';
     timeDiv2.className = 'closed';
  }
};

var currentDay = weekday[now.getDay()];
var currentDayID = "." + currentDay; //gets todays weekday and turns it into id
$(currentDayID).toggleClass("today"); //hightlights today in the view hours modal popup


checkTime2();

 [id ^="timeDiv"]
 {


  width:100%;
  background: transparent;
  margin: 0 auto;

  border-radius: 3px;

 /* -webkit-box-shadow: 0 8px 16px -8px #adadad;
  -moz-box-shadow: 0 8px 16px -8px #adadad;
  box-shadow: 0 8px 16px -8px #adadad;*/
  display:block;

  background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.5); /* Black w/ opacity */
}

.day {
  display: inline-block;
  float: left;
}

.time {
  display: inline-block;
  float: right
}

.today {
  color: rgb(200, 85, 39);
  font-weight: 600;
}

.closed {

  color: rgba(231, 76, 60, 0.85);

}

.open {
  position:relative;
  color: #27ae60;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

<div id="timeDiv2"></div>

Answer 1

由于 timeDiv2 元素是 DOM 的一部分，因此最好的机会是在完全加载 HTML 之前运行 javascript 代码。

仅在页面完全加载后，您可以通过调用 checkTime2() 函数来解决此问题:

$(function() {
    checkTime2();
});