Unable to assign value to variable using "document.getElementById.value"

Question

I am trying to make a countdown timer in which the user can set day, hour, minute and seconds values.

The setlength() function takes the values from the textboxes then sets the variables.

Then when the user clicks the start button, the time in ms (variable lengthms) is calculated and added to the current time.

Then the countdown timer just counts down.

I am quite sure the counting down bit works but I don't understand/know why the script is unable to fetch the values from the input boxes and assign them to the variables.

Any help or another solution to varying the value of the hours minutes and seconds is appreciated.

Thank you in advance!

function setlength() {
  var lengthd = document.getElementById("lengthd").value;
  var lengthh = document.getElementById("lengthh").value;
  var lengthm = document.getElementById("lengthm").value;
  var lengths = document.getElementById("lengths").value;
}

function start() {
  var lengthms = (lengthd * 24 * 3600 + lengthh * 3600 + lengthm * 60 + lengths * 1) * 1000;
  var deadline = new Date(Date.parse(new Date()) + lengthms);
  initializeClock('timerdiv', deadline);
}

function getTimeRemaining(endtime) {
  var t = Date.parse(endtime) - Date.parse(new Date());
  var seconds = Math.floor((t / 1000) % 60);
  var minutes = Math.floor((t / 1000 / 60) % 60);
  var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
  var days = Math.floor(t / (1000 * 60 * 60 * 24));
  return {
    'total': t,
    'days': days,
    'hours': hours,
    'minutes': minutes,
    'seconds': seconds
  };
}

function initializeClock(id, endtime) {
  var clock = document.getElementById(id);
  var daysSpan = clock.querySelector('.days');
  var hoursSpan = clock.querySelector('.hours');
  var minutesSpan = clock.querySelector('.minutes');
  var secondsSpan = clock.querySelector('.seconds');

  function updateClock() {
    var t = getTimeRemaining(endtime);

    daysSpan.innerHTML = t.days;
    hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
    minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
    secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

    if (t.total <= 0) {
      clearInterval(timeinterval);
    }
  }

  updateClock();
  var timeinterval = setInterval(updateClock, 500);
}

<!DOCTYPE html>
<html>

<body>
  <h1>Countdown Timer</h1>
  <div id="timerdiv">
    <div>
      <span class="days"></span>
      <div class="smalltext">Days</div>
    </div>
    <div>
      <span class="hours"></span>
      <div class="smalltext">Hours</div>
    </div>
    <div>
      <span class="minutes"></span>
      <div class="smalltext">Minutes</div>
    </div>
    <div>
      <span class="seconds"></span>
      <div class="smalltext">Seconds</div>
    </div>
  </div>
  <center>
    <p id="length"></p>
    Days: <input type="number" id="lengthd"> Hours: <input type="number" id="lengthh"> Minutes: <input type="number" id="lengthm"> Seconds: <input type="number" id="lengths"><br>
    <button class="button set" onClick="setlength()">Set</button>
  </center>
  <center>
    <div><button class="button start" onClick="start()">Start</button></div>
  </center>
</body>

</html>

The returned value for your e.g. `document.getElementById("lengthh").value` is a string, use `parseInt` like this, `parseInt(document.getElementById("lengthh").value)`, and you will get a number — Asons, Apr 15 '18 at 09:29
`setlength` should be named `getLengths`, then put `return { lengthhh, lengthhd, lengthhm, lengthhs };` into its last line, and do `const {lengthh, lengthhd /*..*/} = getLengths();` were you need it. — Jonas Wilms, Apr 15 '18 at 09:49

score 2 · Accepted Answer · answered Apr 15 '18 at 09:33

Your function setlength() declares all the lengths as local variables, so they are only usable from within that function.

Instead of

function setlength() {
    var lengthd = document.getElementById("lengthd").value;
    var lengthh = document.getElementById("lengthh").value;
    var lengthm = document.getElementById("lengthm").value;
    var lengths = document.getElementById("lengths").value;
}

you should declare the variables outside of your function

var lengthd;
var lengthh;
var lengthm;
var lengths;

function setlength() {
    lengthd = document.getElementById("lengthd").value;
    lengthh = document.getElementById("lengthh").value;
    lengthm = document.getElementById("lengthm").value;
    lengths = document.getElementById("lengths").value;
}

Note that I haven't checked the rest of your code, since you're sure that it works.

Unable to assign value to variable using "document.getElementById.value"

1 Answers1