title: How can I addEvent listeners in my node/express app?
body: <p>I am still trying to get my head around what's possible with frontend vs backend. I still don't understand how to incorporate the likes of an eventListener into my app when I can't select the document.</p>
  <p>I have created a script.js file and added it to my public directory:</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;head&gt;
      &lt;meta charset=&quot;utf-8&quot;&gt;
      &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
      &lt;title&gt;Hours Calculator&lt;/title&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;/styles.css&quot;&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css&quot; integrity=&quot;sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z&quot; crossorigin=&quot;anonymous&quot;&gt;
      &lt;script src=&quot;https://kit.fontawesome.com/391e6a689e.js&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;/script.js&quot;&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  </code></pre>
  <p>and I am serving this folder/files in my app.js like so:</p>
  <pre><code>app.use(express.static(__dirname + '/public'));
  </code></pre>
  <p>However I am unable to target anything in my script.js, for example:</p>
  <pre><code>let h1 = document.body.querySelector('h1');
  h1.style.color = 'brown';
  </code></pre>
  <p>Doesn't work. h1 is undefined.</p>
  <p>I am sure there is an extremely straight forward explanation but there are some gaps in my understanding and would like if someone can explain to me why this isn't working and how I can get the front end and the back end interacting.</p>