title: onclick and external js file
body: <pre><code>&lt;p onclick="play()"&gt;abc&lt;/p&gt;
  </code></pre>
  
  <p>js </p>
  
  <pre><code> function play(){
      do something; 
   }
  </code></pre>
  
  <p>The above works if js code is in the same file as <code>p</code></p>
  
  <p>But saying:</p>
  
  <pre><code>&lt;script src="index.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>index.js</p>
  
  <pre><code>$(document).ready( function() {
       function play() {
          do something; 
       }
  });
  </code></pre>
  
  <p>What i get is <code>ReferenceError: play is not defined</code></p>
  
  <p>Other functions, except <code>play()</code> works well.</p>