0

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

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

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

4

4 回答 4

0

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

于 2021-02-27T20:50:45.120 回答
0

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

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

        const id = e.target.getAttribute('href');
        document.querySelector(`a href=${id}`).scrollIntoView({behavior: 'smooth'});
于 2021-02-27T20:51:27.567 回答
0

那么 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'});
于 2021-02-27T20:49:52.383 回答
0

事件侦听器要求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。

于 2021-02-27T20:56:41.533 回答