Does the location of placing my <script> in html matter? Why does this code only work in one example? (code attached) : <p>This doesn't work:</p>

<pre><code>  &lt;h2&gt;Dinosaurs are cool.&lt;/h2&gt;

  &lt;script&gt;
  document.querySelector('.change-text').addEventListener('click', function () {
  document.querySelector('h2').innerText = 'I AM A DINOSAUR!!!';
  }); &lt;/script&gt;

  &lt;button class='change-text'&gt;Change Text&lt;/button&gt;
</code></pre>

<p>But this does:</p>

<pre><code>  &lt;h2&gt;Dinosaurs are cool.&lt;/h2&gt;

  &lt;button class='change-text'&gt;Change Text&lt;/button&gt;

  &lt;script&gt;
  document.querySelector('.change-text').addEventListener('click', function () {
  document.querySelector('h2').innerText = 'I AM A DINOSAUR!!!';
  }); &lt;/script&gt;
</code></pre>

<p>Any idea why? I've been told to link my javascript's at the top of the head, and that doesn't make this work either. </p>

<p>I'd love some help, thank you so much =)</p>
