title: TypeError : button is null but working fine in console
body: <p>So I wanted to make a webpage in which on button click, the background color changes. </p>
  
  <p>Its showing TypeError on loading in browser but its working fine after pasting same JavaScript on console.</p>
  
  <hr>
  
  <p><strong>Code snippet</strong>
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var colors = ["#0af5fa", "#0ab1fa", "#0a3efa", "#560afa", "#b70afa", "#fa0ad9", "#fa0a65", "#fa0a1e", "#fa5e0a", "#facc0a", "#cbfa0a", "#69fa0a", "#0afa1b", "#0afa77", "#0afae5", "#0a8efa"];
  
  var flag = 0,
    blinkCount = 0;
  
  function blink() {
    if (blinkCount == 15) {
      blinkCount = 0;
      blink();
    } else {
      var h1 = document.querySelector("h1");
      var body = document.querySelector("body");
  
      h1.style.color = colors[blinkCount];
      body.style.background = colors[blinkCount];
      blinkCount++;
    }
  }
  
  var button = document.querySelector("button");
  button.addEventListener("click", blink);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>button {
    width: 50%;
    height: 100px;
    background: black;
    margin-top: 300px;
    margin-left: 300px;
  }
  
  h1 {
    color: #0af5fa;
  }
  
  body {
    background: #0af5fa;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en" dir="ltr"&gt;
  &lt;script src="../JavaScript/ex153.js"&gt;&lt;/script&gt;
  &lt;link href="../css/ex153.css" rel="stylesheet"&gt;
  
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div class=""&gt;
      &lt;button&gt;&lt;h1&gt;Click Me&lt;/h1&gt;&lt;/button&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <hr>
  
  <p><strong>In Browser [Error]</strong></p>
  
  <pre><code>TypeError: button is null[Learn More]     ex153.js:25:1
  </code></pre>