Getting Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')

Question

I want to put the current date and time in a span The HTML code is below snippet:

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0,      minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src="Exe3.js"></script> <title>HomePage</title>  
      <h1>Current Date is :: <span id="dateNow">XX</span></h1>
      <h1>Current Time is :: <span id="timeNow">XX</span></h1>

My JS File is:

    function showDate(){
      let currDateTime = new Date();
      let currDate = currDateTime.toLocaleDateString();
      console.log(currDate);
      document.getElementById("dateNow").innerHTML = currDate;
    }
    function showTime(){ let currDateTime = new Date(); let hour = currDate.getHours(); let minute = currDate.getMinutes(); let second = currDate.getSeconds(); let timeString = hour+" : "+minute+" : "+second; console.log(timeString); document.getElementById("timeNow").innerHTML = timeString; }
    
    showDate(); showTime();

I am getting the below error

enter image description here

Uncaught Type Error: Cannot set properties of null (setting 'innerHTML')

I am new to learning JavaScript

score 0 · Answer 1 · answered Jul 11 '23 at 08:50

Great that you've started your JavaScript journey :)!

The main problem with your code is that the <span id="dateNow" /> element doesn't exist when the scripts is run.

The most straight-forward way of fixing this, is moving the script to the end of the html file (body).

I also recommend to always have the <body> element and remember to close your <html> element:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>
  <title>HomePage</title>
  <h1>Current Date is :: <span id="dateNow">XX</span></h1>
  <h1>Current Time is :: <span id="timeNow">XX</span></h1>
  <script type="text/javascript" src="script.js""></script>
</body>
</html>

Also, a good practice is to make sure that the element exists, before trying to assign something to it, i.e.:

var dateNowElement = document.getElementById("dateNow");

if (dateNowElement) {
  dateNowElement.innerHTML = currDate;
} else {
  console.error('Element with id #dateNow was not found.');
  // Or however you want the error to be handled!
}

Vaibhav · Answer 2 · 2023-07-11T09:10:52.993

This error typically occurs when the JavaScript code is executed before the HTML elements are loaded and accessible in the DOM. In your case, the issue might be that you're trying to access the 'dateNow' and 'timeNow' elements before they are rendered in the HTML.

To fix this problem, you can make a small adjustment to your HTML code. Move the script tag containing the JavaScript code to the bottom of the body element, just before the closing tag. By doing this, you ensure that the JavaScript code is executed after the HTML elements have been loaded.

Here's the updated code:

<!doctype html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
            content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>HomePage</title>
    </head>
    
    <body>
        <div id="dateNow">Current Date is </div>
        <div id="timeNow">Current Time is </div>
    
        <script src="Exe3.js"></script>
    </body>        
</html>

Js Code

function showDate() {
document.getElementById('dateNow').innerHTML = 'Current Date is : ' + new Date().toLocaleDateString();}
function showTime() {
let currDateTime = new Date();
let hour = currDateTime.getHours();
let minute = currDateTime.getMinutes();
let second = currDateTime.getSeconds();
document.getElementById('timeNow').innerHTML = 'Current Time is : ' + hour + ' : ' + minute + ' : ' + second;
}

setInterval(() => {
showDate();
showTime();
}, 1000);

By moving the script to the bottom of the body, you ensure that the JavaScript code is executed only after the 'dateNow' and 'timeNow' elements have been created in the DOM. This should resolve the "Cannot set properties of null" error.

Make sure to save the changes to both your HTML and JavaScript files. After making these adjustments, try running your code again, and the error should be resolved.

Getting Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')

2 Answers2