title: JavaScript functions just not working
body: <p>i have this sample site that i do for practicing and i added a video to it with some buttons with JavaScript.
  when i run the script inside the HTML file its running great, but if i'm trying to run it from the .js file it just doesn't work and the bottons won't do anything.
  any thoughts?</p>
  
  <p><strong>html</strong> :</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Blue Developer Directory&lt;/title&gt;
  &lt;link type="text/css" rel="stylesheet" href="css/stylesheet.css"&gt;
  &lt;script type="text/javascript" src="js.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;video id="ad" width="420" height="350"  controls&gt;
            &lt;source src="video/ad.mp4" type="video/mp4"&gt;
            Please update your browser
          &lt;/video&gt;
          &lt;div style="width:400px;"&gt; 
                &lt;button onclick="playPause()"&gt;Play/Pause&lt;/button&gt; 
                &lt;button onclick="makeBig()"&gt;Big&lt;/button&gt;
                &lt;button onclick="makeSmall()"&gt;Small&lt;/button&gt;
                &lt;button onclick="makeNormal()"&gt;Normal&lt;/button&gt;
          &lt;/div&gt; 
  
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>Javascript</strong>: </p>
  
  <pre><code>var myVideo=document.getElementById(ad); 
  function playPause(){ 
  if (myVideo.paused) 
    myVideo.play(); 
  else 
    myVideo.pause(); 
  } 
  
  function makeBig(){ 
  myVideo.width=560; 
  } 
  
  function makeSmall(){ 
  myVideo.width=320; 
  } 
  
  function makeNormal(){ 
  myVideo.width=420; 
  } 
  </code></pre>