title: why is button2 null? Javascript code not working in browser
body: <p>I wanted to add an event listener to a second button that changes the font size of the heading when you click it, but when I execute the code, the web console returns "button2 is null." How can I make this code work? I don't know what is wrong with my button2 code.    </p>
  
  <pre><code>const myHeading = document.getElementById('myHeading');
  const myButton = document.getElementById('myButton');
  const myTextInput = document.getElementById("myTextInput")
  const FontSize = document.getElementById("myFontSize");
  const button2 = document.getElementById("button2");
  
  myButton.addEventListener("click", () =&gt; {
      myHeading.style.color = myTextInput.value;
  });
  
  button2.addEventListener("click", () =&gt; {
      myHeading.style.fontSize = FontSize.value;
  });
  </code></pre>
  
  <p>html code:</p>
  
  <pre><code>!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset = "UTF-8"&gt;
          &lt;title&gt; Javascript &lt;/title&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
      &lt;h1 id="myHeading"&gt; Javascript &lt;/h1&gt;
      &lt;p&gt; making a web page interactive &lt;/p&gt;
      &lt;input type="text" id="myTextInput"&gt;
      &lt;button id="myButton"&gt; Change headline color &lt;/button&gt;
      &lt;script src="dom.js"&gt; &lt;/script&gt;
      &lt;input type="text" id="myFontSize"&gt;
      &lt;button id="button2"&gt; Change Font Size &lt;/button&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>