无法在渲染时间读取 null 的属性“textContent”答案

【问题标题】：Cannot read property 'textContent' of null at renderTime无法在渲染时间读取 null 的属性“textContent”
【发布时间】：2017-06-30 21:34:13
【问题描述】：

我正在尝试使用 JavaScript 创建一个工作时钟，但代码无法运行。我在控制台中收到以下错误：

在渲染时间无法读取 null 的属性“textContent”

这是 HTML：

<html>

<head>
  <meta charset="utf-8">
  <script src="js/jquery-3.2.1.js" charset="utf-8"></script>
  <script src="js/alarm.js" charset="utf-8"></script>
  <title>Alarm Clock</title>
</head>

<body>
  <div id="clockDisplay" class="clockStyle">3 : 15 : 25 AM</div>
</body>

</html>

这是 JavaScript：

function renderTime() {

  var currentTime = new Date();
  var diem = "AM";
  var h = currentTime.getHours();
  var m = currentTime.getMinutes();
  var s = currentTime.getSeconds();

  if (h == 0) {
    h = 12;
  } else if (h < 12) {
    h = h - 12;
    diem = "PM"
  }

  if (h < 10) {
    h = "0" + h;
  }

  if (m < 10) {
    m = "0" + m;
  }

  if (s < 10) {
    s = "0" + s;
  }



  var myClock = document.getElementById('clockDisplay');
  myClock.textContent(h + ":" + m + ":" + s + "" + diem);
  setTimeout('renderTime()', 1000)

}

renderTime();

【问题讨论】：

在body标签末尾包含脚本或等到DOM加载完毕
你会想玩（减少）超时延迟一点，否则你会得到奇怪的“秒”显示。

标签： javascript jquery html time

【解决方案1】：

这里的问题是脚本在页面加载之前执行。

您只需将js/alarm.js 脚本标签移动到正文标签的末尾，这样它就会在页面完全加载时执行。

而textContent 是一个属性而不是function，因此您的代码会引发异常，请更改以下行：

myClock.textContent ( h + ":" + m + ":" + s + "" + diem);

收件人：

myClock.textContent =  h + ":" + m + ":" + s + "" + diem;

演示：

我重构了你的代码并更正了它，因此它考虑到了这些变化，这是一个有效的 sn-p：

function renderTime(){

  var currentTime = new Date();
  var diem = "AM";
  var h = currentTime.getHours();
  var m = currentTime.getMinutes();
  var s = currentTime.getSeconds();

  if (h == 0) {
    h = 12;
  } else if (h < 12) {
    h = h-12;
    diem = "PM"
  }

  if (h < 10) {
    h = "0" + h;
  }

  if (m < 10) {
    m = "0" + m;
  }

  if (s < 10) {
    s = "0" + s;
  }



   var myClock = document.getElementById('clockDisplay');
    myClock.textContent =  h + ":" + m + ":" + s + "" + diem;
      setTimeout('renderTime()', 1000)

  }

  renderTime();

<html>
  <head>
    <meta charset="utf-8">
    <script src="js/jquery-3.2.1.js" charset="utf-8"></script>
    <title>Alarm Clock</title>
  </head>
  <body>
<div id="clockDisplay" class="clockStyle">3 : 15 : 25 AM</div>
    <script src="js/alarm.js" charset="utf-8"></script>

  </body>
  </html>

【讨论】：

谢谢@chsdk 两个建议的解决方案都有效

【解决方案2】：

您收到此错误的原因是浏览器解析脚本标记时调用了该函数。到那时，实际的 HTML 正文还没有被解析/渲染，并且确实在 dom 中找不到该元素。

试试：

<html>
  <head>
    <meta charset="utf-8">
    <script src="js/jquery-3.2.1.js" charset="utf-8"></script>
    <script src="js/alarm.js" charset="utf-8"></script>
    <title>Alarm Clock</title>
  </head>
  <body onload="renderTime();">
     <div id="clockDisplay" class="clockStyle">3 : 15 : 25 AM</div>
  </body>
</html>

然后在脚本结束时删除函数调用。

【讨论】：