I am trying to call a JavaScript function from an onclick trigger.

HTML section:

<div class="my_radio">
    <input type="radio" name="my_radio" value="1" onclick="my_func()"/>  first button
</div><!-- end of class my_radio -->

And the JavaScript code

<script type="text/javascript">
    $(document).ready(function(){
        function  my_func(){
            alert("this is an alert");
        }
    });
</script>

It does not work.

But if i keep the JavaScript function out of the $(document).ready() code, it works. Following is the relevant code snippet:

<script type="text/javascript">
    $(document).ready(function(){
        function  my_func111(){
            alert("this is an alert");
        }
    });

    function  my_func(){
        alert("this is an alert");
    }
</script>

1) Why does not the first JavaScript code snippet work?

2) How can I get the first JavaScript code snippet working ?

EDIT :

SO FAR AS I KNOW, $(document).ready() is executed when the web page loads completely. So how can I prevent my_func() to be active before or after the complete page-loading if I write my_func() outside $(document).ready()?

I am trying to call a JavaScript function from an onclick trigger.

HTML section:

<div class="my_radio">
    <input type="radio" name="my_radio" value="1" onclick="my_func()"/>  first button
</div><!-- end of class my_radio -->

And the JavaScript code

<script type="text/javascript">
    $(document).ready(function(){
        function  my_func(){
            alert("this is an alert");
        }
    });
</script>

It does not work.

But if i keep the JavaScript function out of the $(document).ready() code, it works. Following is the relevant code snippet:

<script type="text/javascript">
    $(document).ready(function(){
        function  my_func111(){
            alert("this is an alert");
        }
    });

    function  my_func(){
        alert("this is an alert");
    }
</script>

1) Why does not the first JavaScript code snippet work?

2) How can I get the first JavaScript code snippet working ?

EDIT :

SO FAR AS I KNOW, $(document).ready() is executed when the web page loads completely. So how can I prevent my_func() to be active before or after the complete page-loading if I write my_func() outside $(document).ready()?

• javascript
• jquery

• duplicate question > stackoverflow.com/questions/4242541/… – Glavić Commented Nov 27, 2011 at 18:49
• like Alien said > stackoverflow.com/questions/1047454/what-is-lexical-scope – Glavić Commented Nov 27, 2011 at 18:51
• possible duplicate of How can I make a function defined in jQuery.ready available globally? – Andy E Commented Nov 27, 2011 at 18:54
• oh let me understand what u said – Istiaque Ahmed Commented Nov 27, 2011 at 19:15
• @glavić , unintentionally duplicate.. will it affect my post negatively? – Istiaque Ahmed Commented Nov 27, 2011 at 19:18

5 Answers 5

It's all about javascript execution contexts and scope.

Everything that you define within a function is know only in this function.

In your first test, the function my_func() can only be used within the ready callback (and in the inner other objects). You can't reference it outside.

In your second example, the function my_func() is global to the document and accessible from anywhere.

I recognize this is maybe a verry simple explanation :-)

If you define your function within a callback, you can only use it within this callback:

$(document).ready(function(){
  function something(){
    alert('test');
  }

  //..

  something(); // Will work
}

something(); // Won't work

Your first snippet doesn't work, because in in the function my_func111 is defined within the local scope of an anonymous function passed as an argument in your $(document).ready call.

You can fix your code by placing the function definition to the document scope and calling it inside ready function such as:

function my_func(){
   alert("this is an alert");    
}

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

I presume by "it does not work", you mean it says "my_func is not defined" or similar?

When you define a function within a function, the inner function is not visible outside of the outer function (unless it is part of the outer function's return statement).

You'll need to learn about closures, a good tutorial on which can be found here.

You'll add a global variable isReady. The $(document).ready callback section will change it to true.

Both your function and the isReady variable must be defined outside the callback of the $(document).ready, so that they can be seen from outside the scope of the callback.

<script type="text/javascript">
var isReady = false;    // outside the onReady callback

function  myFunc(){     // also outside the onReady callback
    if (!isReady) return; // abort if not ready

    alert("this is an alert");
}


// the onReady callback
$(function(){  // the newer jquery shorthand for: (document).ready(function(){
    isReady = true;
});

</script>

Your HTML code needs no changes. - I changed the names to use JS and HTML conventions, but essentially it's the same as what you originally wrote...

<div class="divMyRadio">

<input type="radio" id="myRadio" value="1" onclick="myFunc()"/>  first button

</div><!-- end of class divMyRadio -->

I As a side note: The newer JQuery uses $(function(){ as shorthand for $(document).ready(function(){ to make things easier for you.