Alert returning as undefined

Question

I am trying to have my alert show up with the time that my timer shows.

function Stopwatch(elem) {
  var time = 0;
  var offset;
  var interval;

  function update() {
    if (this.isOn) {
    time += delta();
  }

  elem.textContent = timeFormatter(time);
}

function delta() {
  var now = Date.now();
  var timePassed = now - offset;

  offset = now;

  return timePassed;
}

function timeFormatter(time) {
  time = new Date(time);

  var minutes = time.getMinutes().toString();
  var seconds = time.getSeconds().toString();
  var milliseconds = time.getMilliseconds().toString();

  if (minutes.length < 2) {
    minutes = '0' + minutes;
  }

  if (seconds.length < 2) {
    seconds = '0' + seconds;
  }

  while (milliseconds.length < 3) {
    milliseconds = '0' + milliseconds;
  }

  return minutes + ' : ' + seconds + ' . ' + milliseconds;
  }

  this.start = function() {
    interval = setInterval(update.bind(this), 10);
    offset = Date.now();
    this.isOn = true;
  };

  this.stop = function() {
    clearInterval(interval);
    interval = null;
   this.isOn = false;
  };

  this.reset = function() {
    time = 0;
    update();
  };

  this.isOn = false;
  }

  var timer = document.getElementById('timer');
var toggleBtn = document.getElementById('toggle');
var resetBtn = document.getElementById('reset');

var watch = new Stopwatch(timer);

function start() {
  toggleBtn.textContent = 'Stop';
  watch.start();
}

function stop() {
  toggleBtn.textContent = 'Start';
  watch.stop();
}

toggleBtn.addEventListener('click', function() {
  watch.isOn ? stop() : start();
});

resetBtn.addEventListener('click', function() {
  watch.reset();
});

function alertSystem(){
  var timer = document.getElementById('timer')
  alert(timer);
}

<h1 id="timer">00 : 00 . 000</h1>

<div>
  <button class=button id="toggle">Start</button>
  <button class=button id="reset">Reset</button>
  <button onclick='alertSystem()'>get number</button>
</div>

It's a lot of code, but it is mostly to get the timer working. The last function called alertSystem() is on the bottom and is the one that triggers the alert call. For me the alert shows up as [object HTMLHeadingElement] or as undefined. The former comes up when I have alert(timer); but if I do alert(timer.value); or alert(timer.length); I get the latter.

Does anyone know how I can just get the value of the timer in the alert?

Possible duplicate of [How can get the text of a div tag using only javascript (no jQuery)](https://stackoverflow.com/questions/10370204/how-can-get-the-text-of-a-div-tag-using-only-javascript-no-jquery) — Phil Ross, Aug 24 '18 at 18:07

score 3 · Accepted Answer · answered Aug 24 '18 at 18:03

3

To get the timer's value, you should do something like:

document.querySelector('#timer').innerHTML

Otherwise , document.getElementById returns a full element as a js object.

answered Aug 24 '18 at 18:03

Martín Zaragoza

1,717
8
19

1

This goes inside the alert right? It worked! Thank you so much. – Jonathan Fascetti Aug 24 '18 at 18:13

Alert returning as undefined

1 Answers1