12. submit is possible but code editor complains about syntaxerror


#1
$(document).ready(
{
    function()
    {
        $('div.pull-me').click(
            {
                $('div.panel').slideToggle('slow');
            });
    }
});

That code is submittable, even though it does not work with the error message:
**

Uncaught SyntaxError: Unexpected string

**


#2

The blocking in the OP is a little confusing. Perhaps if we reduce it slightly, and include a callback function in the click event handler...

$(document).ready(function(){
    $('.pull-me').click(function(){
        $('.panel').slideToggle('slow');
    });
});

Notice in the above we did not include the DIV-node selector. We don't need to be that specific since there are no other node types with a pull-me class, or with a panel class. The classes are ample selectors for our purposes.


#3

How do we know where we need the "function" word and where we don't?

Is "click" always a function and slideToggle or fadeTo - not a function?

Even after ending the JS course this is not obvious to me.


#4

Both click() and ready() are functions that are event listeners. Their parameter is a function, known as an event handler. You will see the term callback, and when you do, you will know that it refers to the the handler function.

$(document).ready();                   // the listener
$(document).ready(function(){});       // the handler

and,

    $(selector).click();               // the listener
    $(selector).click(function(){});   // the handler

The handler function only runs when it is triggered by the event listener. It is a self contained code block that runs each time the event is detected on the object the listener is bound to.


#5

Thanks a lot! Now i understand :smile: