Java Script Countdown Clock Won't Display

Question

I'm attempting to build a countdown timer that starts at 10 days 24 hours 60 minutes 60 seconds and then adds the text from a text box on the html side and then adds that to the display time. Something is bugging and it will not display.

function updateWCTime() {
  today = new Date();
  dueDate = today.getDate() + 10;

  diff = dueDate - today;

  days = Math.floor(diff / (1000 * 60 * 60 * 24));
  hours = Math.floor(diff / (1000 * 60 * 60));
  mins = Math.floor(diff / (1000 * 60));
  secs = Math.floor(diff / 1000);

  dd = days;
  hh = hours - days * 24;
  mm = mins - hours * 60;
  ss = secs - mins * 60;

  document.getElementById("countdown")
    .innerHTML =
    dd + ' days ' +
    hh + ' hours ' +
    mm + ' minutes ' +
    ss + ' seconds' +
    " " +
    document.getElementById("client").value;
}
setInterval('updateWCTime()', 1000);

body {
  background-color: #80d4ea;
}
#countdown {
  height: 100px;
  width: 800px;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  padding-top: 70px;
  font-family: courier, monospace;
  text-align: center;
  color: white;
  font-size: 45px;
}

<div id='countdown'></div>
<div id='textbox'>
  Client:
  <input id='client' type='txt'></input>
  </br>
</div>
<div id='submit_button'>
  <button onclick="updateWCTime()">submit</button>
</div>

ANY help would be greatly appreciated.

Answer 1

As Iván mentoined, the method is getDate(), not GetDate(). Case matters.

Second mistake is - each second you calculate a difference between Date objects holding exactly the same time

today = new Date();
dueDate = new Date(today); // those two are exactly the same

You should explicitly define dueDate to make your code work.

for example,

dueDate = new Date(2015,1,24,0,0,0,0);

Note, your browser does a great job showing you what's wrong with your javascript code, press Ctrl+Shift+I and open "console" tab.

Another suggestion is to use a website providing countdown code for you. Your code have a lot of issues (global variables, creating a date object every time, etc)

another update:

another mistake was <input type="txt" which will break document.getElementById("client").value

This is your code:

Jitter caused by nature of setInterval

var dueDate = (new Date()).getTime() + 10*1000;
var interval;

function updateWCTime() {
  var today = new Date();

  var diff = dueDate - today.getTime();
  if (diff < 0) {
    // clearInterval(interval);
    document.getElementById("countdown").innerHTML = document.getElementById("client").value;
    return;
  }

  var days = Math.floor(diff / (1000 * 60 * 60 * 24));
  var hours = Math.floor(diff / (1000 * 60 * 60));
  var mins = Math.floor(diff / (1000 * 60));
  var secs = Math.floor(diff / 1000);

  var dd = days;
  var hh = hours - days * 24;
  var mm = mins - hours * 60;
  var ss = secs - mins * 60;

  document.getElementById("countdown")
    .innerHTML =
    dd + ' days ' +
    hh + ' hours ' +
    mm + ' minutes ' +
    ss + ' seconds' +
    " " +
    document.getElementById("client").value;
}
interval = setInterval(updateWCTime, 1000);

body {
  background-color: #80d4ea;
}
#countdown {
  height: 100px;
  width: 800px;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  padding-top: 70px;
  font-family: courier, monospace;
  text-align: center;
  color: white;
  font-size: 45px;
}

<div id='countdown'></div>
<div id='textbox'>
  Client:
  <input id='client' type='text'></input>
  </br>
</div>
<div id='submit_button'>
  <button onclick="updateWCTime()">submit</button>
</div>