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

Question

当我点击导航栏上的“开设账户”按钮时，出现错误：

Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '#' is not a valid selector.

// 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

很好 e.target.getAttribute('href') returns "#";你不能用 #sign 定义一个 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 2

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

Answer 3

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

here 你有 querySelector() 的文档，但一个简单的回答是

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

Answer 4

事件侦听器要求导航 link 中的 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。

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

Why is there an error saying Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '#1' is not a valid selector

html

javascript

domexception