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

问题描述

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

未捕获的 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>

不确定我缺少什么来摆脱错误。

解决方法

e.target.getAttribute('href') 返回“#”；你不能用 # 符号定义一个 id it is not valid 。 我会建议你什么 该代码将是这样的

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

,

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

,

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

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

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

,

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

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> 替换为包含您要滚动到的开户表格的元素的 ID。