title: how do I make the HTML button refer to an action in an external javascript file?
body: <p>I am extremly new to coding (week 1) please excuse any misuse of terms, I am still learning.</p>
  
  <p>In my homework I have a button that when clicked needs to change the size of a box on the screen. I believe I have the javascript written correctly, but I don't know how to tell the button in the HTML file "when I click on the button, look to the javascript file for the action" what is the code for button action in HTML. </p>
  
  <p>I am using VScode. </p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Jiggle Into JavaScript&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;p&gt;Press the buttons to change the box!&lt;/p&gt;
  
     &lt;div id="box" style="height:150px; width:150px; background- color:orange; margin:25px"&gt;&lt;/div&gt;
  
      &lt;button id="growBtn"&gt;Grow&lt;/button&gt;
      &lt;button id="blueBtn"&gt;Blue&lt;/button&gt;
      &lt;button id="fadeBtn"&gt;Fade&lt;/button&gt;  
      &lt;button id="resetBtn"&gt;Reset&lt;/button&gt;
  
      &lt;script type="text/javascript" src="javascript.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <pre><code>document.getElementById("growBtn").addEventListener("click", function(){document.getElementById("box").style.height="250px"});
  
  document.getElementById("blueBtn").addEventListener("click", function(){document.getElementById("box").backgroundColor = blue });
  
  document.getElementById("fadeBtn").addEventListener("click", function(){document.getElementById("box").backgroundColor= lightorange });
  
  document.getElementById("resetBtn").addEventListener("click", function(){document.getElementById("box").style.height = "150px"})
  </code></pre>
  
  <p>when I click on the buttons in the HTML file, it should call the javascript file and perform the action (change size, color, etc).</p>