我正在使用HTML、CSS和JavaScript构建一个投资组合网站。我遇到了一个错误:
- 未捕获的类型错误allSections.addEventListener不是函数。*
我试图使用按钮在网站的各个部分之间切换,但它们被第一部分卡住了,按钮点击不会将它们带到下一部分。
const sections = document.querySelectorAll('.section');
const sectBtns = document.querySelectorAll('.controls');
const sectBtn = document.querySelectorAll('.control');
const allSections = document.querySelectorAll('.main-content');
function PageTransitions() {
//buttonclickactiveclass
for (let i = 0; i < sectBtn.length; i++) {
sectBtn[i].addEventListener('click', function() {
let currentBtn = document.querySelectorAll('.active-btn');
currentBtn[0].className = currentBtn[0].className.replace('active-btn', '');
this.className += 'active-btn';
})
}
//sections active class
allSections.addEventListener('click', (e) => {
const id = e.target.dataset.id;
if (id) {
//remove selected from the other btns
sectBtns.forEach((btn) => {
btn.classList.remove('active')
})
e.target.classList.add('active')
//hide other class
sections.forEach((section) => {
section.classList.remove('active')
})
const element = document.getElementById(id);
element.classList.add('active');
}
})
}
PageTransitions();
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
</head>
<body class="main-content">
<header class="section sec1 header active" data-id="home">
</header>
<main>
<section class="section sec2 about" id="about"></section>
<section class="section sec3 portfolio" id="portfolio"></section>
<section class="section sec4 blogs" id="blogs"></section>
<section class="section sec5 contact" id="contact"></section>
</main>
<div class="controls">
<div class="control control-1 active-btn" data-id="home">
<i class="fas fa-home"></i>
</div>
<div class="control control-2 " data-id="about">
<i class="fas fa-user"></i>
</div>
<div class="control control-3 " data-id="portfolio">
<i class="fas fa-briefcase"></i>
</div>
<div class="control control-4 " data-id="blogs">
<i class="far fa-newspaper"></i>
</div>
<div class="control control-5 " data-id="contact">
<i class="fas fa-envelope"></i>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
我试图传递一个console.log函数,但它也不起作用。我希望有人能帮助我。
2条答案
按热度按时间rnmwe5a21#
您正在使用querySelectorAll()选择所有部分。它将返回一个NodeList**,其中包含节的列表。因此,您必须循环它们,然后使用addEventListener()。
有很多错误和额外的代码。我已经根据您的要求更新了代码。试试这个:
我使用了一些CSS行来显示活动部分和控件。希望对大家有帮助。
uxhixvfz2#
querySelectorAll
不会返回单个元素,而是返回node list
。简单地使用console.log(allSection)
或console.log(typeof allSection)
,看看它返回什么。简单的解决方案是使用forEach
迭代将eventListener
应用于节点列表中的所有元素: