title: Why is there an error saying Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '#1' is not a valid selector
body: <p>When I click the &quot;Open Account&quot; button on the navigation I get the error:</p>
  <blockquote>
  <p>Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '#' is not a valid selector.</p>
  </blockquote>
  <pre><code>// Page Navigation
  document.querySelector('.nav__links').addEventListener('click', function (e){
    // Matching element
    e.preventDefault();
    if (e.target.classList.contains('nav__link')) {
          const id = e.target.getAttribute('href');
          document.querySelector(id).scrollIntoView({behavior: 'smooth'});
    }
  });
  
  
  document.querySelector(id).scrollIntoView({behavior: 'smooth'});
  </code></pre>
  <p>...and here is the button HTML:</p>
  <pre><code>&lt;li class=&quot;nav__item&quot;&gt;
    &lt;a class=&quot;nav__link nav__link--btn btn--show-modal&quot; href=&quot;#&quot;&gt;Open account&lt;/a&gt;
  &lt;/li&gt;
  </code></pre>
  <p>Not sure what I'm missing to get rid of the error.</p>