CODEWITHSUNDEEP
javascriptjquery
AlexR
AlexR

Reputation: 841

function within a function javascript logical error

I'm unable to figure out where a syntax logical error resides in the script furthest below. Essentially what it does is it alerts people that they must wait 1.5 seconds before they can answer a radio-button type question and automatically move on to the next page. No alert if they spend more than 1.5 seconds.

This script was written for only one click event, but I need it to work for two nested events, where clicking on a radio button option automatically triggers the "next" button to move on to the next page. For example if you take out the following event (and its end brackets), it works well:

$("[class*=bfasg] .radio").click(function(){

I've checked the syntax at Esprima to make sure the brackets are correct, so the problem lies elsewhere. 

$(document).ready(function() {
   minTime(1.5);
   function minTime(minTime) {
       var startTime = new Date();
       $("[class*=bfasg] .radio").click(function(){$("#movenextbtn").click(function(){
           var endTime = new Date();
           if((endTime - startTime)/1000 <= minTime) {
                alert('You must spend at least '+minTime+' seconds on the question.');
                return false;
            }
            else {
                return true;
            }
        }); 
      });
    }
});

Any experts out there who can detect the problem?

Upvotes: 0

Views: 107

Answers (2)

Ankur Saxena
Ankur Saxena

Reputation: 639

function callMe() {
  // Do Something
}

$(document).ready(function() {
  callMe();
});

DECLARE FUNCTION outside of ready(), but then define FUNCTION inside of ready().it's better to define them outside of document ready. And, if you need to, place the implementation of the method within the document ready.

Upvotes: 0

T.J. Crowder
T.J. Crowder

Reputation: 1074425

(See answer to updated question below)

It's not a syntax error. It's a logic error.

It becomes slightly clearer if you format the code consistently:

$(document).ready(function () {
    minTime(1.5);

    function minTime(minTime) {
        var startTime = new Date();
        // Hooking up a click handler
        $("[class*=bfasg] .radio").click(function () {
            // This code doesn't run until/unless someone clicks
            // one of the `[class*=bfasg] .radio` elements.
            $("#movenextbtn").click(function () {
                var endTime = new Date();
                if ((endTime - startTime) / 1000 <= minTime) {
                    alert('You must spend at least ' + minTime + ' seconds on the question.');
                    return false;
                } else {
                    return true;
                }
            });
        });
    }
});

What you've done there is said "When someone clicks a [class*=bfasg] .radio element, hook up an event handler on the #movenextbtn element."

You probably don't want to wait to hook up the event until someone clicks on a radio button. If your goal is to hook up the click event on both sets of elements, combine them in the same selector as you would in CSS:

$(document).ready(function () {
    minTime(1.5);

    function minTime(minTime) {
        var startTime = new Date();
        $("[class*=bfasg] .radio, #movenextbtn").click(function () {
            var endTime = new Date();
            if ((endTime - startTime) / 1000 <= minTime) {
                alert('You must spend at least ' + minTime + ' seconds on the question.');
                return false;
            }
        });
    }
});

(By the way, returning true from a jQuery event handler has no meaning, so I've removed it above.)

Below you've commented:

What happens is that I want clicking the radio button to automatically trigger the "Next" button for going to the next page since I have one question per page.

That doesn't fundamentally change things. You haven't shown what the button does to move to the next page, but you'd just put that code in the one click handler above. E.g., you still hook click on both the radio buttons and the button, and you still handle that event using common code. E.g.:

$(document).ready(function () {
    minTime(1.5);

    function minTime(minTime) {
        var startTime = new Date();
        $("[class*=bfasg] .radio, #movenextbtn").click(function () {
            var endTime = new Date();
            if ((endTime - startTime) / 1000 <= minTime) {
                alert('You must spend at least ' + minTime + ' seconds on the question.');
                return false;
            } else {
                // ****Move to next page here****
            }
        });
    }
});

Alternately, you could have the radio button click trigger a click event on the button, like this:

$(document).ready(function () {
    minTime(1.5);

    function minTime(minTime) {
        var startTime = new Date();

        // Hook up `click` on the radio buttons
        $("[class*=bfasg] .radio").click(function () {
            // Respond to click by firing click on the #movenextbtn
            $("#movenextbtn").click();
        });

        // Hook up `click` on the #movenextbtn
        $("#movenextbtn").click(function () {
            var endTime = new Date();
            if ((endTime - startTime) / 1000 <= minTime) {
                alert('You must spend at least ' + minTime + ' seconds on the question.');
                return false;
            }
        });
    }
});

I'm not a huge fan of firing synthetic events like that when you could use common logic, but it's an option.

Upvotes: 4

Related Questions