get value of HTML element with javascript

Question

I've made a stopwatch in JavaScript, and i'm showing it through h1 tag of HTML and i'm able to get it's textContent with following code in JS.

<h1 id="time">00:00:00</h1>    
var h1 = document.getElementById('time'),
         getTimer = h1.textContent;

Which fetches the value perfectly, but the problem is when i hit the start button to run the stopwatch and then if click getTime button it still fetches the static value of h1 tag that is 00:00:00, which is not what i'm looking for.I want to fetch the current value of h1 tag which is updating constantly. Suppose i clicked on start button and then after 10sec if i click on getTime i want 00:00:10 as the value of getTimer variable but in my case it's showing only 00:00:00.

Here's the working codepen demo for the same.

var h1 = document.getElementById('time'),
    start = document.getElementById('start'),
    stop = document.getElementById('stop'),
    clear = document.getElementById('clear'),
    seconds = 0, minutes = 0, hours = 0,
    t,
		getTimer = document.getElementById('time').textContent,
		fetchVal = document.getElementById('fetchVal'),
		form = document.getElementById('form');

function add() {
    seconds++;
    if (seconds >= 60) {
        seconds = 0;
        minutes++;
        if (minutes >= 60) {
            minutes = 0;
            hours++;
        }
    }
    
    h1.textContent = (hours ? (hours > 9 ? hours : "0" + hours) : "00") + ":" + (minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") + ":" + (seconds > 9 ? seconds : "0" + seconds);

    timer();
}
function timer() {
    t = setTimeout(add, 1000);
}
/* Start button */
start.onclick = timer;

/* Stop button */
stop.onclick = function() {
    clearTimeout(t);
}

/* Clear button */
clear.onclick = function() {
    h1.textContent = "00:00:00";
    seconds = 0; minutes = 0; hours = 0;
}
form.addEventListener('submit', function(e){
	e.preventDefault();
  alert(getTimer);
});

<form action="#" id="form">
	<h1 id="time">00:00:00</h1>
<button id="start">start</button>
<button id="stop">stop</button>
<button id="clear">clear</button>
<button type="submit" id="fetchVal">Get Time</button>
</form>

How do i get the current value of h1 tag? I'm looking for solution in pure JS

Thanks in advance for the help.

getTimer = document.getElementById('time').textContent is your page loaded value 00:00:00 ,so will always get that value !!! Should change getTimer = document.getElementById('time') and alert(getTimer.textContent — Jack jdeoel
– Jack jdeoel, Commented Jul 14, 2017 at 3:30

Barmar · Accepted Answer · 2017-07-14 03:15:42Z

You have to fetch the new content of the DIV when the user clicks on the button.

var h1 = document.getElementById('time'),
  start = document.getElementById('start'),
  stop = document.getElementById('stop'),
  clear = document.getElementById('clear'),
  seconds = 0,
  minutes = 0,
  hours = 0,
  t,
  getTimer = document.getElementById('time').textContent,
  fetchVal = document.getElementById('fetchVal'),
  form = document.getElementById('form');

function add() {
  seconds++;
  if (seconds >= 60) {
    seconds = 0;
    minutes++;
    if (minutes >= 60) {
      minutes = 0;
      hours++;
    }
  }

  h1.textContent = (hours ? (hours > 9 ? hours : "0" + hours) : "00") + ":" + (minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") + ":" + (seconds > 9 ? seconds : "0" + seconds);

  timer();
}

function timer() {
  t = setTimeout(add, 1000);
}
/* Start button */
start.onclick = timer;

/* Stop button */
stop.onclick = function() {
  clearTimeout(t);
}

/* Clear button */
clear.onclick = function() {
  h1.textContent = "00:00:00";
  seconds = 0;
  minutes = 0;
  hours = 0;
}
form.addEventListener('submit', function(e) {
  e.preventDefault();
  getTimer = document.getElementById('time').textContent;
  alert(getTimer);
});

<form action="#" id="form">
  <h1 id="time">00:00:00</h1>
  <button id="start">start</button>
  <button id="stop">stop</button>
  <button id="clear">clear</button>
  <button type="submit" id="fetchVal">Get Time</button>
</form>

Rico Kahler · Accepted Answer · 2017-07-14 03:16:39Z

I see the issue with your problem. getTimer is a string and the value is created and locked in the first time the variable is created. Instead, you should defined getTimer as a function and invoke it with getTimer() instead of getTimer.

// very simple change
getTimer = function () { return document.getElementById('time').textContent },

Now the code inside the function will be run when the function is invoked like this: getTimer()

See the changed code below:

var h1 = document.getElementById('time'),
    start = document.getElementById('start'),
    stop = document.getElementById('stop'),
    clear = document.getElementById('clear'),
    seconds = 0, minutes = 0, hours = 0,
    t,
    // change `getTimer` to be a function instead eargly grabbing the value
		getTimer = function () { return document.getElementById('time').textContent},
		fetchVal = document.getElementById('fetchVal'),
		form = document.getElementById('form');

function add() {
    seconds++;
    if (seconds >= 60) {
        seconds = 0;
        minutes++;
        if (minutes >= 60) {
            minutes = 0;
            hours++;
        }
    }
    
    h1.textContent = (hours ? (hours > 9 ? hours : "0" + hours) : "00") + ":" + (minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") + ":" + (seconds > 9 ? seconds : "0" + seconds);

    timer();
}
function timer() {
    t = setTimeout(add, 1000);
}
/* Start button */
start.onclick = timer;

/* Stop button */
stop.onclick = function() {
    clearTimeout(t);
}

/* Clear button */
clear.onclick = function() {
    h1.textContent = "00:00:00";
    seconds = 0; minutes = 0; hours = 0;
}
form.addEventListener('submit', function(e){
	e.preventDefault();
  alert(getTimer()); // now call the function instead just using the value
});

<form action="#" id="form">
	<h1 id="time">00:00:00</h1>
<button id="start">start</button>
<button id="stop">stop</button>
<button id="clear">clear</button>
<button type="submit" id="fetchVal">Get Time</button>
</form>

Oleg Markoff · Accepted Answer · 2017-07-14 03:22:04Z

I will use innerHTML for getTimer

var h1 = document.getElementById('time'),
    start = document.getElementById('start'),
    stop = document.getElementById('stop'),
    clear = document.getElementById('clear'),
    seconds = 0, minutes = 0, hours = 0,
    t,
		getTimer = document.getElementById('time'),
		fetchVal = document.getElementById('fetchVal'),
		form = document.getElementById('form');

function add() {
    seconds++;
    if (seconds >= 60) {
        seconds = 0;
        minutes++;
        if (minutes >= 60) {
            minutes = 0;
            hours++;
        }
    }
    
    h1.textContent = (hours ? (hours > 9 ? hours : "0" + hours) : "00") + ":" + (minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") + ":" + (seconds > 9 ? seconds : "0" + seconds);

    timer();
}
function timer() {
    t = setTimeout(add, 1000);
}
/* Start button */
start.onclick = timer;

/* Stop button */
stop.onclick = function() {
    clearTimeout(t);
}

/* Clear button */
clear.onclick = function() {
    h1.textContent = "00:00:00";
    seconds = 0; minutes = 0; hours = 0;
}
form.addEventListener('submit', function(e){
	e.preventDefault();
  alert(getTimer.innerHTML);
});

<form action="#" id="form">
	<h1 id="time">00:00:00</h1>
<button id="start">start</button>
<button id="stop">stop</button>
<button id="clear">clear</button>
<button type="submit" id="fetchVal">Get Time</button>
</form>

Collectives™ on Stack Overflow

get value of HTML element with javascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related