Question

无法将属性“innerText”设置为 null

2019-04-03

7085

javascript html

我遇到了一些错误，请帮助我。我确实检查了 f12 错误消息：

TypeError: Cannot set property innerHTML of null << like this

抱歉我的英语不好。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
 <body>
<div class="js-clock"></div>
<h1>00:00</h1>
<script type ="text/javascript">
const clockContainer=document.querySelector(".js-clock") ,
clockTitle =clockContainer.querySelector("h1");

function getTime() {
const date = new Date();
const minutes = date.getMinutes();
const hours = date.getHours();
clockTitle.innerText =`${hours}:${minutes}`;


}

function  init() {
getTime();

} 
init();
</script>
</body>
</html>

Answer 1

clockContainer 是一个元素，您正在使用 Element.querySelector() 。

The querySelector() method of the Element interface returns the first element that is a descendant of the element on which it is invoked that matches the specified group of selectors.

clockContainer.querySelector("h1"); 将返回 clockContainer 内的 <h1> 元素。您应该将 <div> 包裹在 <h1> 周围。>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
 <body>
<div class="js-clock">
<h1>00:00</h1>
</div>
<script type ="text/javascript">
    const clockContainer=document.querySelector(".js-clock") ,
    clockTitle =clockContainer.querySelector("h1");

    function getTime() {
      const date = new Date();
      const minutes = date.getMinutes();
      const hours = date.getHours();
      clockTitle.innerText =`${hours}:${minutes}`;  
    }

    function  init() {
      getTime();

    } 
    init();
</script>
</body>
</html>

Answer 2

您正在查看 div 元素内的 h1 元素，但它位于 div 之外。请将 h1 元素放在 div 内。

const clockContainer=document.querySelector(".js-clock") ,
clockTitle =clockContainer.querySelector("h1");

function getTime() {
  const date = new Date();
  const minutes = date.getMinutes();
  const hours = date.getHours();
  clockTitle.innerText =`${hours}:${minutes}`;
}

function  init() {
  getTime();
} 
init();

<div class="js-clock">
  <h1>00:00</h1>
</div>

如果您不想将 h1 放在 div 内，则可以直接从 document 访问该元素。

clockTitle = document.querySelector("h1");

function getTime() {
  const date = new Date();
  const minutes = date.getMinutes();
  const hours = date.getHours();
  clockTitle.innerText =`${hours}:${minutes}`;
}

function  init() {
  getTime();
} 
init();

<div class="js-clock"></div>
<h1>00:00</h1>

Answer 3

根据其他答案，如果您不需要 clockContainer 来做其他任何事情，您可以直接在 querySelector 中定位 h1 元素并跳过额外的步骤。

// Target the h1 in the element with the js-clock class
const clockTitle = document.querySelector('.js-clock h1');

function getTime() {
  const date = new Date();
  const minutes = date.getMinutes();
  const hours = date.getHours();
  clockTitle.innerText = `${hours}:${minutes}`;
}

getTime();

<div class="js-clock">
  <h1>00:00</h1>
</div>