onclick and external js file

Question

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

Answer 1

$(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?

Answer 2

This is due to scope.

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

Answer 3

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() {