title: I can't seem to get my JavaScript to do anything
body: <p>How do I link it to an external .js file I've made to put all of my JavaScript in? </p>
  
  <p>My HTML code looks like this:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en-US"&gt;
  
  &lt;head&gt;
  
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;Sweet Dreams Bakery&lt;/title&gt;
  &lt;link rel="stylesheet" href="home.css"&gt;
  &lt;script src="jquery-3.2.1.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>I've made the .js files for each page and they are in the same folder as the html files, however when I try to link them together with <code>&lt;script src="home.js"&lt;/script&gt;</code> underneath the library path, nothing works. I'm wanting to start with a simple image change on hover with my logo.</p>
  
  <p>I've also tried the inline trick within my HTML for the logo with this code:</p>
  
  <pre><code>&lt;img src="1" onmouseover="this.src='2'" onmouseout="this.src='1'"&gt;
  </code></pre>
  
  <p>I've tried linking to the "home.js" file I created and adding this into that file:</p>
  
  <pre><code>$(function(){
    $("#swaplogo").on({
     mouseenter: function(){
      $(this).attr('src','Logo1.png');
    },
    mouseleave: function(){
      $(this).attr('src','Logo.png');
    }
    });
  
  });
  </code></pre>
  
  <p>I thought this was supposed to call out to the id that I gave the image and all of my images are together and working fine within the site. The id code for my logo is this:</p>
  
  <pre><code>&lt;img id="swaplogo" alt="sweet dreams bakery logo" src="Logo.png" &gt;
  </code></pre>
  
  <p>How would I go about linking an external JavaScript file (like my CSS files) to the html page in order to get the interactions to function correctly? </p>
  
  <p>How to I link to my JavaScript to begin with? and then how do I make my image change on hover/mouseover?</p>