Getting a JavaScript value into a variabe

Question

My 14 yr old son is working on a Science Project looking at reaction time and age. He is setting up a little web app to test people - When a page is loaded a timer starts and there is a delay in a STOP button appearing (4 secs for this example). When they click the stop button, the timer stops. He's done a great job of coding all of that so far. He is using a piece of JavaScript that he found and has modified it to his needs.
His issue - how to pass the stopped time into a variable and then pass that to another page. He is able to successfully do it if the variable is static ie "Hello." What is wrong with the function stop(); in this example? He currently gets a [object HTMLSpanElement]

var clsStopwatch = function() {
    // Private vars
    var startAt = 0;    // Time of last start / resume. (0 if not running)
    var lapTime = 0;    // Time on the clock when last stopped in milliseconds

    var now = function() {
            return (new Date()).getTime(); 
        }; 

    // Public methods
    // Start or resume
    this.start = function() {
            startAt = startAt ? startAt : now();
        };

    // Stop or pause
    this.stop = function() {
            // If running, update elapsed time otherwise keep it
            lapTime = startAt ? lapTime + now() - startAt : lapTime;
            startAt = 0; // Paused
        };

    // Reset
    this.reset = function() {
            lapTime = startAt = 0;
        };

    // Duration
    this.time = function() {
            return lapTime + (startAt ? now() - startAt : 0); 
        };
};

var x = new clsStopwatch();
var $time;
var clocktimer;

function pad(num, size) {
var s = "0000" + num;
return s.substr(s.length - size);
}

function formatTime(time) {
var h = m = s = ms = 0;
var newTime = '';

h = Math.floor( time / (60 * 60 * 1000) );
time = time % (60 * 60 * 1000);
m = Math.floor( time / (60 * 1000) );
time = time % (60 * 1000);
s = Math.floor( time / 1000 );
ms = time % 1000;

newTime = pad(h, 2) + ':' + pad(m, 2) + ':' + pad(s, 2) + ':' + pad(ms, 3);
return newTime;
}

function update() {
$time.innerHTML = formatTime(x.time());
}

function start() {
$time = document.getElementById('time');
update();
clocktimer = setInterval("update()", 1);
x.start();
$(document).ready(function() { $('#mybutton').delay(4000).fadeIn(0);});
}

function stop() {
x.stop();
//var varTime = "Hello";
var varTime = document.getElementById('time');
    window.location.href = "somephpfile.php?etime=" + varTime;


}

Just try : var varTime = document.getElementById('time').innerText; — Rayon
– Rayon, Commented Nov 8, 2015 at 2:59
your current varTime will return an object (which I believe is a div or p). You have to use .innerText to get the text value inside the object :). Hope this helps — Tree Nguyen
– Tree Nguyen, Commented Nov 8, 2015 at 3:01

Tigger · Accepted Answer · 2015-11-08 03:17:00Z

1

The var varTime = document.getElementById('time') is assigning the element to the varible, which is fine and not a bad option however I believe your son only needs the HTML text of that element.

There are two options. The first option keeps the time element in the function for possible expansion later.

function stop() {
    x.stop();
    var varTime = document.getElementById('time');
    if (varTime) {
        window.location.href = "somephpfile.php?etime=" + varTime.innerHTML;
    }
}

Or just extract the required text and send it - even if it is empty.

function stop() {
    x.stop();
    if (document.getElementById('time')) {
        window.location.href = "somephpfile.php?etime=" + document.getElementById('time').innerHTML;
    }
}

answered Nov 8, 2015 at 3:17

Tigger

9,1485 gold badges40 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tigger Over a year ago

Happy to help. Good luck with the project.

Tonlage · Accepted Answer · 2015-11-08 03:09:21Z

0

You need to read the innerHTML of the element instead if just reading element itself. This can be accomplished by :

function stop() {
x.stop();
//var varTime = "Hello";
var varTime = document.getElementById('time').innerHTML;
window.location.href = "somephpfile.php?etime=" + 
}

answered Nov 8, 2015 at 3:09

Tonlage

514 bronze badges

Collectives™ on Stack Overflow

Getting a JavaScript value into a variabe

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related