I have this code below which creates a stopwatch. What happens though is if i set speed (how fast time passes) to a high value like 4, sometimes when I click the record link the click isn't registered. I think this is due to the code execution being stopped by the triggering of the timer() function. Any ways around this?

It's kind of hard to tell what I'm talking about just looking at the code so I have attached the file as a .txt file. Rename it to a .html file.


(Note: I have multiple text boxes because I am trying to time multiple events).

var time = 0;
var speed = 1;
var clock;
var count = 0;
var disptime = "";
var seconds = 0;
timer = function() {
var timelabel = document.getElementById("timer");
//format the seconds string to disptime
var seconds = (time%60) + "";
if(seconds.length == 1) {
seconds = "0" + seconds;
}
disptime = Math.floor(time/60) + ":" + seconds;

//make the label display the time, add a "Record" link that writes the displayed time to a textbox
timelabel.innerHTML = "<p><strong>" + disptime + "</strong> <span class='time'><a href='javascript:record(\"" + disptime + "\")'>Record</a><span></p>";

time++;

//if the number of records is greater than a certain value, stop
if(count >= document.getElementById('number').value) {
timelabel.innerHTML = "";
clearInterval(clock);
}
}

function start() {
timer();
clock = setInterval("timer()", (1000/speed));
}

record = function(dt) {
var textbox = document.getElementById("time" + count);
textbox.value = dt;
count++;
}

I think the reason clicks to that record link aren't being "registered" when on a quick interval is because every time timer() is called, it in essence removes and re-creates that "record" link in there (as changing the innerHTML property in reality deletes and creates new HTML).

So when a user clicks their mouse down on the link, the link is actually getting removed and a new link is being put in by the time their mouse button comes up, therefore never actually triggering the original link's href. The new link that is created there never got a mousedown event fired on it too, so that one isn't working either to record your times. A link's href only gets triggered when a full mousedown and mouseup are fired on it (i.e. a full 'click').

What you need to do is write the code so that the "record" link is not removed and recreated on each interval. Just create the link in your add() function. The link should also just call another function that will grab the current timer's value and write it into your text fields.

If you need more help, post again and I'll show you what I mean.

Why would you want to write the record( ) function to pass the disptime, anyway???

You already are storing disptime in a page-scope variable, so why not just use it?

On top of that, I believe some browsers don't permit adding form fields by just using innerHTML; you have to properly use createElement( ) calls.

Thanks for the good ideas guys. Gjslick, recreating the link could be the reason it's not getting registered, i'll test it out.

Since old pedants right, there is no need to pass the time to record() anyway so I have no reason to recreate the record link.

Although I didn't really test it cross browser I know this works in FF3 which is all I need. Guess my problem wasn't so tough after all.

EDIT: Problem solved. If anyone is curious the fixed file is attached.

I think it's only the older NS browsers that limit this as I noted. Not sure.

Hey, glad you got it working. Happy codin' buddy.

Greg