javascript - 为什么会出现错误提示 Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '#1' is not a valid selector

Question

当我点击导航上的“开立账户”按钮时，我收到错误消息：

未捕获的 DOMException：无法在“文档”上执行“querySelector”：“#”不是有效的选择器。

// 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'});

...这是按钮 HTML：

<li class="nav__item">
  <a class="nav__link nav__link--btn btn--show-modal" href="#">Open account</a>
</li>

不知道我缺少什么来摆脱错误。

Answer 1

您必须通过任何文本更改标签中的# from href 。<a># 本身就是一个 id 选择器。

Answer 2

由于查询选择器的制作方式，您不能像这样使用它。

在这里，您有 querySelector() 的文档，但对您的简单回答是

        const id = e.target.getAttribute('href');
        document.querySelector(`a href=${id}`).scrollIntoView({behavior: 'smooth'});

Answer 3

那么 e.target.getAttribute('href') 返回 "#"; 你不能用#号定义一个id，它是无效的。我会建议你的代码是这样的

<li class="nav__item">
  <a  class="nav__link nav__link--btn btn--show-modal" href="#">Open account</a>
</li>
Not sure what I'm missing to get rid of the error.

Cheers

// Page Navigation
document.querySelector('.nav__links').addEventListener('click', function (e){
  // Matching element
  e.preventDefault();
  if (e.target.classList.contains('nav__link')) {
       
        document.querySelector("a").scrollIntoView({behavior: 'smooth'});
  }
});


document.querySelector("a").scrollIntoView({behavior: 'smooth'});

Answer 4

事件侦听器要求href导航链接中的 是要滚动到的元素的有效选择器。所以改变

<a class="nav__link nav__link--btn btn--show-modal" href="#">Open account</a>

至

<a class="nav__link nav__link--btn btn--show-modal" href="#someid">Open account</a>

并替换someid为包含您要滚动到的开户表单的元素的 ID。