function within a function javascript logical error

Question

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?

In the code you provided there is no syntax error, are you getting a runtime error and if so what is it and on what line? — HMR
– HMR, Commented Jun 29, 2013 at 6:17
(Well, it's unnecessary if there's no whitespace or several other things.) — T.J. Crowder
– T.J. Crowder, Commented Jun 29, 2013 at 6:26

T.J. Crowder · Accepted Answer · 2013-06-29 07:06:06Z

(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.

Thanks, I actually misspoke when I said "combined the two click events". 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. So they need to remain nested in a way. I will clarify this in the post.
thank you! It did dawn on me just minutes ago that the second click event should be part of the else statement, but you beat me to it. Those two nested events were in fact part of a stand-alone function before I decided to also include the timing aspect but I failed to see the error in logic.

Ankur Saxena · Accepted Answer · 2013-06-29 07:12:16Z

0

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.

answered Jun 29, 2013 at 7:12

Ankur Saxena

6393 gold badges13 silver badges26 bronze badges

Collectives™ on Stack Overflow

function within a function javascript logical error

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related