Tracking how long it takes user to click a button

JavaScript
1

Hi,
I need help with setting up a timer for my webpage - specifically, I have a page which closes 5 minutes after it’s opened (using settimout), but within that time, I want to know how long it takes for the user to click on a particular button - either the time from when the page first loads until the button is clicked, or the time from when the button is clicked until the 5 minutes elapse. I need this to be saved as a variable when the page closes.
Any suggestions are appreciated.

2

I came up with the following, but it’s not working - if you have any suggestions, please let me know.

<FORM name = “autoform” METHOD = “post”>

<script type=“text/javascript”>

var starttime = new Date();

function submitForm()
{
document.getElementById(‘autoform’).submit();
}

setTimeout(‘submitForm();’, 10000);
function tracktime()
{
var clicktime = new Date();
var tottime = clicktime - starttime;
document.autoform.<ml.varname>_01.value = tottime;
}
</script>

<button TYPE=“button” onlcick = “tracktime()”> click this button </button>

<input type=“hidden” name=“<ml.varname>_01” value= “” >

</form>

3

This part of the code looks suspect:


document.autoform.<ml.varname>_01.value = tottime;

You really should use array-notation instead for named attributes with special characters


document.autoform['<ml.varname>_01'].value = tottime;
4

Here is a way to do it, but you will need to fill in the missing details regarding sending the form. This script illustrates the principle by writing the elapsed time to the page after button click. The timeout at the end is only 5 seconds long, so you can see what happens if nobody clicks the button.

The total time is stored in the hidden form variable.

[HIGHLIGHT=“”]
<!doctype HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>

<html>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=windows-1252”>
<title>Timing User Input</title>
<script type=“text/javascript”>
<!–
// begin timing after page loads.
var startTime, tOut=null; // global
function init()
{ startTime = new Date();
// finish set for 5 secs here for testing
tOut=setTimeout(“submitForm()”,5000);
}
// ----------
function trackTime()
{ // clear timeout
clearTimeout(tOut);
// register time of onclick event
var clickTime = new Date();
var totTime = clickTime - startTime;
// save total time in hidden variable in form
document.autoform.varName_01.value = totTime;
// write total time to page
document.getElementById(“output”).innerHTML=totTime;
// send form
submitForm()
}
// ----------
function submitForm()
{ // clear timeout
clearTimeout(tOut);
alert(“finished”); // temporary alert for testing
// form needs an action and method attributes to work, so not active below this line
// document.getElementById(“autoform”).submit();
}
//–>
</script>
</head>

<body onload=“init()”>

<form name=“autoform”>
<p><button TYPE=“button” onclick=“trackTime()”>click this button</button>
<input type=“hidden” name=“varName_01” value=“0”></p>
</form>
<p>Elapsed time(mSec)= <span id=“output”>0</span></p>
<!-- end form –>

</body>

</html>