title: Working With HTML and an External Javascript File
body: <p>I am relatively new to Javascript and would appreciate some support on the simple question. I am trying to import an external Javascript file, which will allow for a &quot;onmouseover&quot; event. The event simply changes the text color when moused over. Here is what I have so far.</p>
  <h1>index.html</h1>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
      &lt;title&gt; # &lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;header&gt;
          &lt;div class=&quot;logoContainer&quot;&gt;
              &lt;a href=&quot;/&quot;&gt;&lt;img src=&quot;#&quot; alt=&quot;#&quot; /&gt;&lt;/a&gt;
          &lt;/div&gt;
          &lt;nav&gt;
              &lt;ul class=&quot;navigationLinks&quot; onmouseover=&quot;redText&quot;&gt;
                  &lt;li&gt;&lt;a class=&quot;navigationLink1&quot; href=&quot;#&quot;&gt;link text 1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a class=&quot;navigationLink2&quot; href=&quot;#&quot;&gt;link text 2&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/nav&gt;
      &lt;/header&gt;
      &lt;main&gt;
         #
      &lt;/main&gt;
             &lt;script src=&quot;./app.js&quot;&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <h1>app.js</h1>
  <pre><code>const redText = () =&gt; {const changeColor = document.querySelectorAll(&quot;.navigationLinks&quot;);
  changeColor.style.color = 'red';}
  </code></pre>
  <p>I am unsure what is wrong with my source code. I was able to achieve the desired results with the code below, however the goal is to pull the js code from the app.js file instead of utilizing it directly in the index.html file.</p>
  <pre><code>&lt;nav&gt;
     &lt;ul class=&quot;navigationLinks&quot;&gt;
        &lt;li&gt;&lt;a class=&quot;navigationLink1&quot; href=&quot;#&quot; onmouseover=&quot;this.style.color='red'&quot; onmouseout=&quot;this.style.color='black'&quot;&gt;link text 1&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a class=&quot;navigationLink2&quot; href=&quot;#&quot; onmouseover=&quot;this.style.color='red'&quot; onmouseout=&quot;this.style.color='black'&quot;&gt;link text 2&lt;/a&gt;&lt;/li&gt;
     &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>