CODEWITHSUNDEEP
javascript
EDev
EDev

Reputation: 460

INNERHTML not showing when working on console

Cannot set property 'innerHTML' of null"

Please help, I'm new to JS so if it is a newbie error don't kill me lol. It works perfectly on console, returns what I'm searching but it's not showing at DOM

HTML:

<div id="clock">
        <script src="../JS/countdown.js"></script>
 </div>

JS

const getRemainingTime = deadline => {
      let now = new Date (), 
      remainTime = (new Date (deadline) - now + 1000) / 1000,
      remainSeconds = ('0' + Math.floor(remainTime % 60)).slice(-2),
      remainMinutes = ('0' + Math.floor(remainTime / 60 % 60)).slice(-2),
      remainHour = ('0' + Math.floor(remainTime / 3600 % 24)).slice(-2),
      remainDays =  Math.floor(remainTime / (3600 * 24));

  return {
    remainTime,
    remainSeconds,
    remainMinutes,
    remainHour,
    remainDays
  }
}

const countdown = (deadline, elem, finalMessage) => {
  const el = document.getElementById(elem);
  
  const timerUpdate = setInterval( () => {
  let t = getRemainingTime(deadline);
  el.innerHTML = "${t.remainDays}d:${t.remainHour}h:${t.remainMinutes}m:${t.remainSeconds}s";
  if (t.remainTime <= 1) {
    clearInterval(timerUpdate)
    el.innerHTML = finalMessage;
  }
  }, 1000)  
}

countdown('Mon June 17 2021 00:00:00 GMT-0600', 'clock', 'Discount')

Upvotes: 0

Views: 887

Answers (1)

Real Quick
Real Quick

Reputation: 2800

You're using double quotes on template literals. And you might not have a div with that ID. try this:

const getRemainingTime = deadline => {
  let now = new Date(),
    remainTime = (new Date(deadline) - now + 1000) / 1000,
    remainSeconds = ('0' + Math.floor(remainTime % 60)).slice(-2),
    remainMinutes = ('0' + Math.floor(remainTime / 60 % 60)).slice(-2),
    remainHour = ('0' + Math.floor(remainTime / 3600 % 24)).slice(-2),
    remainDays = Math.floor(remainTime / (3600 * 24));

  return {
    remainTime,
    remainSeconds,
    remainMinutes,
    remainHour,
    remainDays
  }
}

const countdown = (deadline, elem, finalMessage) => {
  const el = document.getElementById(elem);

  const timerUpdate = setInterval(() => {
    let t = getRemainingTime(deadline);
    el.innerHTML = `${t.remainDays}d:${t.remainHour}h:${t.remainMinutes}m:${t.remainSeconds}s`;
    if (t.remainTime <= 1) {
      clearInterval(timerUpdate)
      el.innerHTML = finalMessage;
    }
  }, 1000)
}

countdown('Mon June 17 2021 00:00:00 GMT-0600', 'clock', 'Discount')
<div id="clock"></div>

Upvotes: 4

Related Questions