Why variable return a NULL value in external script.js file? : <p>I'm try to create a clickable button in my webpage using Javascript, First i'm writing index.html (html, css, javascript all together) then it was work fine. Here is my first code: </p>

<pre><code>  &lt;!DOCTYPE html&gt;
   &lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;LearnVariable&lt;/title&gt;
   &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
  &lt;/head&gt;
&lt;body&gt;
    &lt;button&gt;PressMe&lt;/button&gt;
    &lt;script&gt;
        var button = document.querySelector('button');
        button.onclick = function(){
            var name = prompt('What is your Name');
        }
    &lt;/script&gt;
 &lt;/body&gt;
 &lt;/html&gt;
</code></pre>

<p>Then i'm try to write my javascript code in different file name <strong>script.js</strong> and Link this file with head section and cut my script part from body section .Then it occur a error that say that <strong>TypeError: button is null</strong> .
Here is my <strong>index.html</strong> code :</p>

<pre><code> &lt;!DOCTYPE html&gt;
 &lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;LearnVariable&lt;/title&gt;
    &lt;script src="script.js"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;button&gt;PressMe&lt;/button&gt;
  &lt;/body&gt;
 &lt;/html&gt;
</code></pre>

<p>And This is my <strong>script.js</strong> code:</p>

<pre><code>var button = document.querySelector('button');
button.onclick = function(){
var name = prompt('What is your Name');
}
</code></pre>

<p>I'm try to find the bug by myself and search internet then they said that use console.log(button) to figure out the error, but i didn't find how to solve this.</p>
