Question

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

TypeError：无法像这样设置innerHTML <<的属性null

道歉我的英语。

<!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()。

Element接口的querySelector()方法返回第一个元素，该元素是在其上被调用的元素的后代，与指定的选择器组匹配。

clockContainer.querySelector("h1");将返回<h1>内的clockContainer元素。您应该将<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>

如果您不想在 div 中放入 h1 ，则可以直接从 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，则可以直接在h1中定位querySelector元素，并跳过该步骤。

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

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

3 个答案: