<p onclick="play()">abc</p>

js

 function play(){
    do something; 
 }

The above works if js code is in the same file as p

But saying:

<script src="index.js"></script>

index.js

$(document).ready( function() {
     function play() {
        do something; 
     }
});

What i get is ReferenceError: play is not defined

Other functions, except play() works well.

<p onclick="play()">abc</p>

js

 function play(){
    do something; 
 }

The above works if js code is in the same file as p

But saying:

<script src="index.js"></script>

index.js

$(document).ready( function() {
     function play() {
        do something; 
     }
});

What i get is ReferenceError: play is not defined

Other functions, except play() works well.

• javascript
• jquery
• onclick

• 1 Have you tried removing the $(document).ready(function() {}); if the javascript is within an external file? – Nunners Commented Oct 15, 2013 at 7:48
• 1 thanks to everyone. solved – qadenza Commented Oct 15, 2013 at 7:51

3 Answers 3

$(document).ready(function(){
  function play(){
        do something; 
     }
});

play() function is local to $(document).ready(function(){ not global

Don't wrap your play function in $(document).ready(function(){ to keep it's scope global .

function play(){
    do something; 
}

Read Global and Local and Private Functions (Javascript)

and What is the scope of variables in JavaScript?

This is due to scope.

play() isn't visible at that level, due to it being wrapped inside your $(document).ready function.

No need to place it in $(document).ready( function() {..}

just mention it in your index.js as

function play(){
  do something; 
}

remove $(document).ready( function() {