//网页
<div class="nav-bullets">
<div class="bullet">
<div class="tooltip" data-i=".about-us">About Us</div>
</div>
<div class="bullet">
<div class="tooltip" data-i=".skills">Our Skills</div>
</div>
<div class="bullet">
<div class="tooltip" data-i=".gallery">Our Gallery</div>
</div>
<div class="bullet">
<div class="tooltip" data-i=".timeline">TimeLine</div>
</div>
</div>
//脚本语言
使用一个类没有这样的问题
// Select All Bullets
const allBullets = document.querySelectorAll(".nav-bullets .bullet");
allBullets.forEach(bullet => {
bullet.addEventListener("click" , (e) => {
document.querySelector(".about-us").scrollIntoView({
behavior: 'smooth'
});
});
});
//问题
// Uncaught TypeError: Cannot read properties of null (reading 'scrollIntoView') at HTMLDivElement.<anonymous>
//但是如果我让类动态化而不是像这样工作
allBullets.forEach(bullet => { bullet.addEventListener("click" , (e) => { document.querySelector(e.target.dataset.i).scrollIntoView({ behavior: 'smooth' }); }); });
1条答案
按热度按时间tv6aics11#
您要将事件侦听器附加到
.bullet
元素,但它没有data-i
属性,您已经将其添加到子元素.tooltip
:这就是
e.target.dataset.i
未定义并且document.querySelector(undefined)
不匹配任何元素的原因。将数据属性移动到
.bullet
。