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

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>

Answer 2

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>