I have the following function:

$(document).ready(function(){
 function fav(type){
    switch(type){
        case "radius":if(radius_fav.indexOf(rad)== -1){
                        radius_fav.push(rad);
                         }
                         break;
        case  "transform":if(transform_fav.indexOf(final_transformation) == -1){transform_fav.push(final_transformation);}
                            break;
        default:if(bshadow !== none && box_fav.indexOf(bshadow) == -1){box_fav.push(bshadow);}  
                        break;                              
    }
    }//end of switch statement


});

Inside $(document).ready().This function won't work unless it is put outside document.ready().Any ideas?Jquery tag in html page is included CONSOLE: Uncaught ReferenceError: fav is not defined

I have the following function:

$(document).ready(function(){
 function fav(type){
    switch(type){
        case "radius":if(radius_fav.indexOf(rad)== -1){
                        radius_fav.push(rad);
                         }
                         break;
        case  "transform":if(transform_fav.indexOf(final_transformation) == -1){transform_fav.push(final_transformation);}
                            break;
        default:if(bshadow !== none && box_fav.indexOf(bshadow) == -1){box_fav.push(bshadow);}  
                        break;                              
    }
    }//end of switch statement


});

Inside $(document).ready().This function won't work unless it is put outside document.ready().Any ideas?Jquery tag in html page is included CONSOLE: Uncaught ReferenceError: fav is not defined

• javascript
• jquery

• 1 So why you want to put it inside pseudo ready handler? I guess you are facing scope issue, check your console for error – A. Wolff Commented Mar 8, 2015 at 12:16

1 Answer 1

I have the following function...Inside $(document).ready().This function won't work unless it is put outside document.ready().Any ideas?

It sounds like you're calling the function from an onXyz attribute, like this:

<div onclick="fav('radius')">...</div>

Functions called that way must be globals, but when you declare the function within the ready callback, it's not a global, it's scoped to the ready callback.

Creating globals is best avoided, which is one of the reasons not to use onXyz attributes for event hookup. Instead:

<div id="radius">...</div>

...and then in ready:

$("#radius").on("click", function() {
    fav('radius');
});

...or similar.

You don't have to give these all ids, and in fact you may well be able to use the same handler for several of them. for instance:

<div class="control" data-type="radius">...</div>
<div class="control" data-type="transform">...</div>
<!-- ... -->

then

$(".control").on("click", function() {
    fav(this.getAttribute("data-type"));
    // Or:
    // fav($(this).attr("data-type"));
    // But not .data(), that's for something else, not for just accessing data-* attributes
});

Note that you don't need a ready function at all in most cases. Just put a inline-invoked function expression at the end of the document, just before the closing </body> tag:

<script>
(function() {
    $(".control").on("click", function() {
        fav(this.getAttribute("data-type"));
        // Or:
        // fav($(this).attr("data-type"));
        // But not .data(), that's for something else, not for just accessing data-* attributes
    });
})();
</script>
</body>
</html>

You really only need a ready handler if you don't control where the script tags go.