如何解决为什么会出现 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。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。