title: How to stop onscroll event error if you use it for a shared element in all pges and a single element in one page only
body: <p>The problem is:</p>
  <p>background is only in the first page but div is shared in all pages.</p>
  <p>without inspection, it all looks fine.</p>
  <p>but when I inspect on browsers on the other pages that don't have background, I get the following error with every single scroll.</p>
  <pre><code>Uncaught TypeError: background is null
      scroll http://100.0.0.0:0000/script.js:83
      EventListener.handleEvent* http://100.0.0.0:0000/script.js:78
  191 script.js:83:5
      scroll http://100.0.0.0:0000/script.js:83
      (Async: EventListener.handleEvent)
      &lt;anonymous&gt; http://100.0.0.0:0000/script.js:78
  </code></pre>
  <p>I solved the problem by creating a separate js file that only includes the scroll code for home page. it worked fine but I was wondering if I could solve it without creating a new js file.</p>
  <pre><code>// show the div and change background opacity on scroll
      
      let background= document.getElementById(&quot;background&quot;);
      let div= document.getElementById(&quot;div&quot;);
      
      window.addEventListener(&quot;scroll&quot;, scroll); 
      
      function scroll() {
        if (window.scrollY &gt;= 500) {
          div.style.display= &quot;block&quot;
          background.style.opacity = &quot;0.05&quot;;
        } else {
          div.style.display= &quot;block&quot;
          background.style.opacity = &quot;0.3&quot;;
        }
        
      }
  </code></pre>