时间戳

首页 > 解决方案 > 在 JS 中难以选择页面上的元素

javascript - 在 JS 中难以选择页面上的元素

问题描述

我正在尝试用 JavaScript 构建一个时钟，目前，我一直坚持使用querySelector来选择我想要的适当元素。

function showTime() {
  var date = new Date();
  var h = date.getHours(); // 0 - 23
  var m = date.getMinutes(); // 0 - 59
  var s = date.getSeconds(); // 0 - 59

  var time = h + ":" + m;
  
  console.log(document.querySelector('#time').textContent);
}

showTime();
<body>
  <div class="time">
    <h1 id="time">1:55</h1>
    <h3>PM</h3>
  </div>
</body>

控制台告诉我：Uncaught TypeError: Cannot read property 'textContent' of null.

这是为什么？

标签： javascripthtmlcss

解决方案

我们可以清楚地看到以下代码段运行正常。

function showTime() {
  var date = new Date();
  var h = date.getHours(); // 0 - 23
  var m = date.getMinutes(); // 0 - 59
  var s = date.getSeconds(); // 0 - 59

  var time = h + ":" + m;
  
  console.log(document.querySelector('#time').textContent);
}

showTime();
<body>
  <div class="time">
    <h1 id="time">1:55</h1>
    <h3>PM</h3>
  </div>
</body>

您的项目一定有不同的问题。最可能的猜测是您的脚本在#time加载之前执行。
您可以通过几种方式修复它。

1. 将script标签放在正文的末尾。
这样可以确保仅在正文完成加载时才调用脚本。

<body>
  <div class="time">
    <h1 id="time">1:55</h1>
    <h3>PM</h3>
  </div>
  ...

  <script src="script.js"></script>
</body>

2. 寻找window.onload
仅在窗口加载后运行代码。

window.onload = () => {
  function showTime() {
    var date = new Date();
    var h = date.getHours(); // 0 - 23
    var m = date.getMinutes(); // 0 - 59
    var s = date.getSeconds(); // 0 - 59
    var time = h + ":" + m;

    console.log(document.querySelector('#time').textContent);
  }

  showTime();
}

3. 使用deferattribute
defer属性确保它所附加的元素在最后加载，即在页面完成加载之后。这样您甚至可以script在head.

<!--This script will load only when the page has completed loading-->
<script src="script.js" defer></script>

推荐阅读