将JavaScript值转换为变量

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;


}

Answer 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;
    }
}