My countdown timer will not work or show up

Question

This is my first project with adding JavaScript and I can't seem to make it work. I'm trying to build a countdown timer, but the countdown will not show up. Any ideas on why this is happening? I've tried everything that I could think of. Again, this is my first JS incorporated project.

 var holidazeEnd = new Date("July, 3 2019 12:00:00").getTime(); var timer = setInterval(function () { let now = holidazeEnd().getTime(); let t = holidazeEnd - now; if (t >= 0) { let days = Math.floor(t / (1000 * 60 * 60 * 24)); let hours = Math.floor((t % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); let mins = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60)); let secs = Math.floor((t % (1000 * 60)) / 1000); document.getElementsByClassName("timer-days").innerHTML = days + "<span class= 'label'>Days</span>"; document.getElementsByClassName("timer-hours").innerHTML = ("0" + hours).slice(-2) + "<span class= 'label'>Hours</span>"; document.getElementsByClassName("timer-minutes").innerHTML = ("0" + minutes).slice(-2) + "<span class= 'label'>Minutes</span>"; document.getElementsByClassName("timer-seconds").innerHTML = ("0" + seconds).slice(-2) + "<span class= 'label'>Seconds</span>"; } else { document.getElementById("timer").innerHtml = "Happy Independence Day!"; } }, 1000); 

 body { padding: 0; margin: 0; } .container { width: 100%; height: 780px; background-color: aquamarine; } #timer { color: red; font-size: 60px; background-color: black; } .label { color: green; font-size: 50px; } 

 <div class="container"> <p id="timer"> <span class="timer-days"></span> <span class="timer-hours"></span> <span class="timer-minutes"></span> <span class="timer-seconds"></span> </p> </div> 

Answer 1

try this, but I change use console.log.

 var holidazeEnd=new Date("July, 3 2019 12:00:00").getTime(); var timer= setInterval(function(){ let now=new Date().getTime(); let t=holidazeEnd-now; if (t >= 0) { let days = Math.floor(t / (1000 * 60 * 60 * 24)); let hours = Math.floor((t % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); let mins = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60)); let secs = Math.floor((t % (1000 * 60)) / 1000); console.log("days: " +days +" Hours: "+hours + " mins: " +mins + "secs: "+secs); } else{ console.log("Happy Independence Day");} },1000); 

 body { padding: 0; margin: 0; } .container { width: 100%; height: 780px; background-color: aquamarine; } #timer { color: red; font-size: 60px; background-color: black; } .label { color: green; font-size: 50px; } 

 <div class="container"> <p id="timer"> <span class="timer-days"></span> <span class="timer-hours"></span> <span class="timer-minutes"></span> <span class="timer-seconds"></span> </p> </div> 

Answer 2

my version...

 const timer = document.getElementById('timer'), t_day = document.getElementsByClassName("timer-days")[0], // getElementsByClassName return array t_hours = document.getElementsByClassName("timer-hours")[0], t_mins = document.getElementsByClassName("timer-minutes")[0], t_secs = document.getElementsByClassName("timer-seconds")[0]; var holidazeEnd = new Date("July, 3 2019 12:00:00").getTime(); var timerInterval = setInterval(function () { let now = new Date().getTime(); let t = holidazeEnd - now; if (t >= 0) { t_day.textContent = Math.floor(t / (1000 * 60 * 60 * 24)); t_hours.textContent = ("0" + Math.floor((t % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))).slice(-2); t_mins.textContent = ("0" + Math.floor((t % (1000 * 60 * 60)) / (1000 * 60))).slice(-2); t_secs.textContent = ("0" + Math.floor((t % (1000 * 60)) / 1000)).slice(-2); } else { timer.innerHtml = null; timer.textContent = "Happy Independence Day!"; clearInterval(timerInterval); // logicaly ? } }, 1000); 

 body { padding: 0; margin: 0; } .container { width: 100%; height: 780px; background-color: aquamarine; } #timer { color: red; font-size: 40px; background-color: black; } .label { color: green; font-size: 50px; } 

 <div class="container"> <p id="timer"> <span class="timer-days"></span><span class= 'label'>Days</span> <span class="timer-hours"></span><span class= 'label'>Hours</span> <span class="timer-minutes"></span><span class= 'label'>Minutes</span> <span class="timer-seconds"></span><span class= 'label'>Seconds</span> </p> </div>