.getElementById(" ") 没有按要求工作答案

【问题标题】：.getElementById(" ") not working as required.getElementById(" ") 没有按要求工作
【发布时间】：2015-10-11 10:19:52
【问题描述】：

我正在尝试根据时间更改标题 (h1) 中的文本。值不变。不知道为什么它不起作用 - 到目前为止尝试了多种更改和解决方案。

<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>

【问题讨论】：

setTimeout 只运行一次函数，请改用setInterval，或者在headerChange 中添加另一个setTimeout。
好的，但是你看，它甚至没有改变一次..
你错过了函数headerChange的结束}
代码仅在上午 7:45 到上午 9:59 之间更改标题...您是否在正确的时间进行了测试？另外，您应该将脚本放入head或body，目前HTML无效。
是的。我尝试了正确的时间。

标签： javascript html innerhtml

【解决方案1】：

请关闭 headerChange 功能。我认为它缺少右括号。其次，您同时使用 setTimeout 和递归调用。我建议不要递归调用它，你可以这样做

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";
   }
}
  setTimeout(headerChange, 1000);

【讨论】：

【解决方案2】：

<script>
var myVar = setInterval(headerChange, 1000);

function headerChange(){
 var d = new Date();
 var m = d.getMinutes();
 var h = d.getHours();
 var elem = document.getElementById("ce");

  if(h == 7 && m>=45){
     elem.innerHTML = "event1";
  }else if(h == 8 && m>=00){
     elem.innerHTML = "event2";
  }else if(h == 8 && m>=15){
     elem.innerHTML = "event3";
  }else if(h == 8 && m>=45){
     elem.innerHTML = "event4";
  }else if(h == 9 && m>=00){
     elem.innerHTML = "event5";
  }else if(h == 9 && m>=15){
     elem.innerHTML = "event6";
  }
}
</script>

【讨论】：

【解决方案3】：

感谢您的所有回答！ @racraman 发现了问题所在。这是 youtube iFrame。一旦我删除了那个特定的演示 iFrame，我的代码就开始工作了。

【讨论】：