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

Question

The countdown can't appear on the website as below.

When I input the codes here, the result is appear the countdown.

But I don't know why in my browser (chrome & IE) it doesn't appear, just zero as picture above.

PLease find the code here: https://pastecode.io/s/sgkfae0y

Thanks.

let daysItem = document.querySelector("#days");
let hoursItem = document.querySelector("#hours");
let minItem = document.querySelector("#min");
let secItem = document.querySelector("#sec");

let countDown = () => {
    let futureDate = new Date("17 Dec 2021");
    let currentDate = new Date();
    let myDate = futureDate - currentDate;
    //console.log(myDate);

    let days = Math.floor(myDate / 1000 / 60 / 60 / 24);
    let hours = Math.floor(myDate / 1000 / 60 / 60) % 24;
    let min = Math.floor(myDate / 1000 / 60) % 60;
    let sec = Math.floor(myDate / 1000) % 60;

    daysItem.innerHTML = days;
    hoursItem.inneraHTML = hours;
    minItem.innerHTML = min;
    secItem.innerHTML = sec;
}

countDown()

setInterval(countDown, 1000)

@import url('https://fonts.googleapis.com/css2?family=Handlee&family=Merienda&family=Nova+Oval&display=swap');

* {
    box-sizing: border-box;
}

body {
    font-family: 'Handlee', cursive;
    text-align: center;
    align-items: center;
    position: relative;
    justify-content: center;
 }

 h1 {
    color: rgb(240, 51, 139);
    font-family: 'Merienda', cursive;
}

.nama-mempelai {
    font-family: 'Nova Oval', cursive;
}

h2 {
    color: grey;
}

p {
    font-size: 125%;
}

 .container {
     display: absolute;

 }

 .countdown {
    margin: 60px auto 10px auto ;
 }

 .countdown-container {
    display: flex;
    background-color: rgb(255, 155, 172);
    color: white;
    margin: 0 auto;
    box-sizing: border-box;
    }


.box-countdown {
    flex-grow: 1;
    border: 2px solid rgb(250, 116, 138);
    margin: 20px auto;
    border-radius: 20px;
    box-shadow: 0 2px 10px rgb(117, 117, 117, 0.5);
    max-width: 150px;
    display: block;
    padding: auto 20px;
}

.big-text {
    font-size: 4rem;

}

.profil-mempelai {
    margin: 60px auto 10px auto ;
 }

.profil-mempelai-container {
    display: flex;
    color: rgb(7, 7, 7);
    margin: 0 auto;
}


.box-profil {
    flex-grow: 1;
    margin: 20px auto;
    padding: 20px 50px ;
    border: 2px solid rgb(168, 168, 168);
    border-radius: 20px;
    box-shadow: 0px 2px 10px 0px rgb(117, 117, 117, 0.5);
    max-width: 300px;
    min-width: 230px;
    text-align: center;
    height: auto;
}

.judul-section {
    margin: 20px;
}
 footer {
    padding: 20px;
    color: rgb(56, 55, 55);
    background-color: #ff0ea3
 }

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial scale=1.0">
    <title>Nama kedua mempelai</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="responsive.css">
    </head>
    <body>
    <script type="text/javascript" src="main.js"></script>
        <div class="container">
            <div class="top">
                <h2>Wedding Invitation</h2>
                <h1 class="nama-mempelai">Yestria & Bima</h1>
                <h3>17 December 2021</h3>
                <p class="ayat"><i>"Dan di antara tanda-tanda (Kebesaran)-Nya ialah Dia menciptakan pasangan-pasangan untukmu dari jenismu sendiri, agar kamu cenderung dan merasa tentram kepadanya dan Dia menjadikan di antaramu rasa kasih dan sayang. Sungguh pada yang demikian itu benar-benar terdapat tanda-tanda (Kebesaran Allah) bagi kaum yang berpikir."</i>
                    <br>(QS. Ar-Rum : 21)</p>
            </div>
            
            <div class="countdown">
                <h1 class="judul-section">Countdown of Our Wedding</h1>            
                <div class="countdown-container">
                    <div class="box-countdown">
                        <div id="days" class="big-text">0</div>
                        <span>Days</span>
                    </div>
                    <div class="box-countdown">
                        <div id="hours" class="big-text">0</div>
                        <span>Hours</span>
                    </div>
                    <div class="box-countdown">
                        <div id="min" class="big-text">0</div>
                        <span>Minutes<span>
                    </div>
                    <div class="box-countdown">
                        <div id="sec"a class="big-text">0</div>
                        <span>Seconds</span>
                    </div>
                </div>
            </div>

            <div class="profil-mempelai">
                <h1>The Start of A New Journey</h1>    
                <div class="profil-mempelai-container">
                    <div class="box-profil">
                        <img src="akhwat.jpg" width="100px" height="100px">
                        <h2 class="nama-mempelai-1">Yestria Yaswari</h2><p><b>Daughter of</b><br>Mr. Father & Mrs. Mother</p>
                    </div>

                    <div class="box-profil">
                        <img src="ikhwan.png" width="100px" height="100px">
                        <h2 class="nama-mempelai-2">Bimo</h2><p><b>Son of</b><br>Mr. Father & Mrs. Mother</p>
                    </div>
                </div>
            </div>
            
            <h1>Gallery</h1>
            <div class="gallery">

            </div> 
            
            <h1>Best Wishes for Yestria & Bimo</h1>
        </div>
     

    </body>
</html>

You'll need to add a [mcve] (as _text_) for us to be able to help you. — Ivar, Nov 20 '21 at 23:38
hi, ivar. I've insert the link of code since I can't copy to this posting. Please help. — tika, Nov 21 '21 at 01:10
That's not how Stack Overflow works I'm afraid. Have a look at [ask]. The code should be as a [mcve] as text in the question itself, not behind a link. Be sure to include the HTML here as well (including where this script is inserted into the page and the elements/tags you are referencing), as that is very relevant here. — Ivar, Nov 21 '21 at 01:19
i've tried to insert the code here but there's error "It looks like your post is mostly code; please add some more details." — tika, Nov 21 '21 at 01:30
hi, ivan. I've succed to insert the codes here. please kindly check my revised question. Thanks. — tika, Nov 21 '21 at 01:35
See https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element You are trying to find/query the element before it exists. — Ivar, Nov 21 '21 at 01:42

score 0 · Answer 1 · answered Nov 24 '21 at 13:27

hoursItem.inneraHTML is surely incorrect, you need to fix it to hoursItem.innerHTML.

The error message tells you that there is no innerHTML of null, so you have an unidentified variable whose member you intend to refer. This causes the error. It seems that your code chunk does not contain the position of your actual error.

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

1 Answers1