title: Running external Javascript functions from HTML "onclick"
body: <p>Despite several other solutions, I have yet to find one that actually solves my problem. I have an HTML file containing a header with</p>
  
  <pre><code>    &lt;script type="text/javascript" src="./js/throwaway.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>and in the body there is a button like so:</p>
  
  <pre><code>    &lt;button onclick="basicAlert()"&gt;&lt;/button&gt;
  </code></pre>
  
  <p>and I have the Javascript function basicAlert():</p>
  
  <pre><code>    function basicAlert() {
          alert("this is a test to see if basicAlert runs");
      }
  </code></pre>
  
  <p>I've been stuck on this for two days now to no avail, but I cannot get the onclick function to execute basicAlert() when the function is in the external file. I can have a script in the HTML holding the function, and it will run flawlessly, but when the function is in the external file, it does not run. Attempted solutions included trying onsubmit (it's a search bar), removing 'type="text/javascript"' (since default is JS anyways), and moving the script src to the different sections of the file, headers, body, at the end, etc. making the path things like "/js/throwaway.js", "../js/throwaway", every combination I could think would make sense. The current file set-up is a Node app.js that references from folder public, which contains the HTML doc and a folder "js" which contains the throwaway program. And yes the file location is correct in relation to the HTML, where it's being referenced. If I could just have the function inside the HTML, I would, but there's going to be several functions, so I don't want to clutter the HTML file.</p>
  
  <p>I'm very new to javascript and HTML, so I would appreciate any assistance. Thanks in advance.</p>
  
  <p>EDIT: someone asked for full relevant code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;title&gt;Spotlight&lt;/title&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
      &lt;link rel="stylesheet" href="css/style.css"&gt;
      &lt;script type="text/javascript" src="./js/spotifyFunctions.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;input type="text" class="form-control" id="songSearch" placeholder="Enter Song or Playlist..."&gt;
  &lt;button id="search" onclick="basicAlert()"&gt;&lt;div class="search-icon"&gt;&lt;ion-icon name="search"&gt;&lt;/ion-icon&gt;&lt;/div&gt;&lt;/button&gt;
      &lt;script src="link"&gt;&lt;/script&gt; &lt;!-- There's about 20 of these before the basic alert --&gt;
      &lt;script&gt;
          function basicAlert() {
              alert("throwaway");
          }
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>EDIT 2: The Javascript file I have may be the culprit for the errors due to its imports, thanks to those who helped me out in here</p>
  
  <pre><code>import Spotify from "spotify-web-api-js";
  const spotifyApi = new Spotify();
  
  //Several functions utilizing spotify API
  
  function basicAlert() {
      alert("this is a test to see if basicAlert runs");
  }
  console.log("made it");
  </code></pre>
  
  <p>Throws error in console:</p>
  
  <pre><code>SyntaxError: import declarations may only appear at top level of a module
  </code></pre>
  
  <p>I can probably figure this one out on my own. Thanks!</p>