javascript - Cannot set property 'innerText' of null

I got some error please help me. I did check out f12 the error message :

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

Apologies for my English.

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

I got some error please help me. I did check out f12 the error message :

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

Apologies for my English.

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

Share Improve this question edited Apr 3, 2019 at 12:41 Joey Phillips 1,6552 gold badges16 silver badges22 bronze badges asked Apr 3, 2019 at 10:16 woongb 371 silver badge4 bronze badges

Add a ment |

3 Answers 3

Sorted by: Reset to default 3

clockContainer is a element and you are using 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"); will return <h1> element inside clockContainer. You should wrap the <div> around <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>

You are looking the h1 element inside the div element, but it is outside of the div. Place the h1 element inside the 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>

If you do not want h1 inside the div then you can access the element directly from 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>

Following on from the other answers, if you don't need clockContainer for anything else you can target the h1 element directly in the querySelector and skip that extra step.

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Cannot set property 'innerText' of null - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)