Question

JSfiddle (showing the non-working code) here: http://jsfiddle.net/ts2Rr/

I have three boxes that a user must click one at a time to see the content of that box. Upon seeing the content of that box the user inputs text into a textbox and then the next box is shown. However, the user only has five seconds to do so. Testing the code so far seems to indicate that the failure occurs around the if else statement but I can’t figure out what’s wrong. Without the if else statement in the code, everything works up to that point. With the if else statement in the code nothing works (not even the code before it).

With the if else statement I am trying to use two variables (one set upon the start of the function, and the other set when the user inputs text). I then subtract the two to get a millisecond time variable. If that is less than 5,000 ms record it to the hidden form field. Else, run a setTimeOut function that records 5 seconds to the hidden form field. Is this even possible?

//start after 3 seconds on page load
   //settimeout()
         //appends onclick onto #Box 1 that calls function Rate when clicked
         //.toggleclass onto  #Box1
         //300;

window.onload = function(){
     setTimeout(function(){
        $('#BoxE1').bind('click', function() {
                Rate();
                //alert('User clicked on "foo."');                    //uncomment for testing purposes only
            });
        $('#BoxE1').toggleClass('inactive active');
     }, 3000);
};

function Rate() {
    $('#E1Rate').show();                            //Show the object to be rated
    $('#BoxE1').unbind('click');                    //Prevent the user from clicking on the box again
    $('#BoxE1').toggleClass('inactive active');        //Toggles the box back to green
//Code works up to this point so far, if I need to rollback just add }; to the next line
    var startTime = new Date();
    var elaspedTime = (inputTime - startTime);         //Calculate the elasped milliseconds
    if (elaspedTime < 5000) {
        document.getElementById("E1RatingTime").value=elaspedTime;
    }
    else {
        setTimeout (function(){
            document.getElementById("E1RatingTime").value="5";
        }, 5000);
    }
    $('#E1Rate').hide();    
};

Answer 1

Your code stops working because of a syntax error in

SetTimeout function(){

Correct it to

setTimeout(function() {...}, 5000);

Btw. getElementById() does not need the # hash before the id string. It even won’t work with the #