因此，当通过 if 语句通过 JavaScript 插入事件侦听器以检查用户类型的 localStorage 时，事件侦听器未添加到 id closeBtn 上时遇到了问题。我检查了 userType，因为我对不同的 userType 有不同的导航。
当我没有通过 JavaScript 加载导航的 html 代码而只是将它放在 html-doc 中时，closeBtn 可以工作，但由于某种原因，当我通过 JavaScript 插入时它不会。奇怪的是，id navBtn 确实有效，它也在 closeBtn 的同一位置获得了一个事件侦听器。
let nav = {
navBtn: document.getElementById('navBtn'),
closeBtn: document.getElementById('closeBtn'),
overlay: document.getElementById('overlay'),
nav: document.getElementById('nav'),
initnav: function() {
if (this.nav) {
if (localStorage.getItem('userType')) {
if (localStorage.getItem('userType') == "company") {
// prettier-ignore
this.nav.innerHTML = `
<main>
<aside>
<img src="./media/images/Erasmushogeschool-logo.png" alt="Erasmushogeschool Brussel logo">
</aside>
<ul>
<li class="active"><a href="./indexbedrijven.html">Home</a></li>
<li><a href="./careerlaunch2022.html">Careerlaunch 2022</a></li>
<li><a href="vacatures_bedrijven.html">Vacatures</a></li>
<li><a href="./agenda.html">Mijn Agenda</a></li>
<li><a href="./chats_bedrijf.html">Chat</a></li>
<li><a href="./index.html">Careerlaunch voor studenten</a></li>
</ul>
</main>
<footer>
<div div class = "accountBtns" >
<div class="account" >
<a href = "./account.html" >
<div class="profilePic myProfile"></div>
<h4 id="userName">Vince</h4>
</a>
</div>
<button>Afmelden</button>
</div>
<div id="closeBtn">
<div></div>
<div></div>
</div>
</footer>
`;
} else if (localStorage.getItem('userType') == "student") {
// prettier-ignore
this.nav.innerHTML = `
<main>
<aside>
<img src="./media/images/Erasmushogeschool-logo.png" alt="Erasmushogeschool Brussel logo">
</aside>
<ul>
<li class="active"><a href="index.html">Home</a></li>
<li><a href="./careerlaunch2022.html">Careerlaunch 2022</a></li>
<li><a href="./planning.html">Planning</a></li>
<li><a href="vacatures.html">Vacatures</a></li>
<li><a href="favorieten.html">Favoriete vacatures</a></li>
<li><a href="./agenda.html">Mijn Agenda</a></li>
<li><a href="chats.html">Chat</a></li>
<li><a href="game.html">Careerlaunch game</a></li>
</ul>
</main>
<footer>
<a class="account" href="./account.html">
<div>
<div class="profilePic myProfile"></div>
<h4 id="userName">Vince</h4>
</div>
<button>Afmelden</button>
</a>
<div id="closeBtn">
<div></div>
<div></div>
</div>
</footer>
`;
}
} else {
//prettier-ignore
this.nav.innerHTML = `
<main>
<aside>
<img src="./media/images/Erasmushogeschool-logo.png" alt="Erasmushogeschool Brussel logo">
</aside>
<ul>
<li class="active"><a href="index.html">Home</a></li>
<li><a href="">Careerlaunch 2022</a></li>
<li><a href="">Map</a></li>
<li><a href="">Planning</a></li>
<li><a href="vacatures.html">Vacatures</a></li>
<li><a href="favorieten.html">Favoriete vacatures</a></li>
<li><a href="">Mijn Agenda</a></li>
<li><a href="chats.html">Chat</a></li>
<li><a href="game.html">Careerlaunch game</a></li>
</ul>
</main>
<footer>
<div class="notLogged">
<div>
<a href="registreren_1-4.html" class="bluebox">Registreren</a>
<a href="login_student.html" class="graybox">log in</a>
</div>
</div>
<div id="closeBtn">
<div></div>
<div></div>
</div>
</footer>
`;
}
this.navEventListnr();
}
},
navEventListnr: function() {
this.navBtn.addEventListener('click', () => {
nav.animateNav("open");
});
console.log("closeListner");
this.closeBtn.addEventListener('click', () => {
nav.animateNav("close");
});
},
animateNav: function(action) {
console.log('open');
if (action == "open") {
this.navBtn.style.display = "none";
this.overlay.style.display = "block";
this.overlay.style.opacity = ".7";
this.nav.style.right = "0vw";
} else if (action == "close") {
console.log('close');
this.navBtn.style.display = "flex";
this.nav.style.right = "-80vw";
this.overlay.style.opacity = "0";
setTimeout(() => {
this.overlay.style.display = "none";
}, 100);
}
}
};
nav.initnav();<!DOCTYPE html>
<html lang="en">
<head>
<title>Careerlaunch</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="./styles/reset.css">
<link rel="stylesheet" type="text/css" href="./styles/index.css">
<script type="module" src="./js/index.js" defer></script>
</head>
<body style="background-color: green;">
<div id="overlay"></div>
<div id="navBtn">
<div></div>
<div></div>
<div></div>
</div>
<nav id='nav'>
<main>
<aside>
<img src="./media/images/Erasmushogeschool-logo.png" alt="Erasmushogeschool Brussel logo">
</aside>
<ul>
<li class="active"><a href="index.html">Home</a></li>
<li><a href="">Careerlaunch 2022</a></li>
<li><a href="">Map</a></li>
<li><a href="">Planning</a></li>
<li><a href="vacatures.html">Vacatures</a></li>
<li><a href="favorieten.html">Favoriete vacatures</a></li>
<li><a href="">Mijn Agenda</a></li>
<li><a href="chats.html">Chat</a></li>
<li><a href="game.html">Careerlaunch game</a></li>
</ul>
</main>
<footer>
<div class="notLogged">
<div>
<a href="registreren_1-4.html" class="bluebox">Registreren</a>
<a href="login_student.html" class="graybox">log in</a>
</div>
</div>
<div id="closeBtn">
<div></div>
<div></div>
</div>
</footer>
</nav>
</body>
</html>