Search code examples
javascripthtmlinnerhtml

.getElementById(" ") not working as required

I'm trying to change the text inside a header (h1) depending on the time. The value does not change. Not sure why it is not working - tried multiple changes and solutions thus far.

<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Lato:100' rel='stylesheet' type='text/css'>
</head>
<body>
<center>
  <img src = "image.png" width = "25%" height = "auto"/>
    <h1 id = "ce" style="font-weight: normal; font-family: 'lato', sans-serif; font-size:80px;">No Event</h1>
</center>
<iframe id="ytplayer" type="text/html" width="100%" height="500"
src="http://www.youtube.com/embed/M7lc1UVf-VE?autoplay=1&origin=http://example.com"
frameborder="0"/>
  <script>
 function headerChange(){
 var d = new Date();
 var m = d.getMinutes();
 var h = d.getHours();
 if(h == 7 && m>=45){
    document.getElementById("ce").innerHTML = "event1";
  }
  if(h == 8 && m>=00){
  document.getElementById("ce").innerHTML = "event2";
  }
  if(h == 8 && m>=15){
  document.getElementById("ce").innerHTML = "event3";
  }
  if(h == 8 && m>=45){
  document.getElementById("ce").innerHTML = "event4";
  }
  if(h == 9 && m>=00){
   document.getElementById("ce").innerHTML = "event5";
  }
  if(h == 9 && m>=15){
     document.getElementById("ce").innerHTML = "event6";
   }
   }
  headerChange();
  setTimeout(headerChange, 1000);
  </script>
</body>
  </html>
Solution

  • Thank you for all your answer! @racraman figured out the problem. It was the youtube iFrame. Once I removed that particular demo iFrame my code began to work.