JavaScript 未如預期運行
我試圖使 html css js 響應，但它不能按預期工作，當它最小化時，它已經響應了，但當 onclick 時它不起作用。 導航和導航列不會出現並在單擊時消失。 html 和 css 正在工作 但js我不知道什麼是錯的還是錯的 有人可以幫我嗎？
let menu = document.querySelector('#menu-icon');
let navbar = document.querySelector('.navbar');
console.log(menu); // cek "menu-icon"
console.log(navbar); // cek "navbar"
menu.onclick = () => {
menu.classList.toggle("bx-x");
navbar.classList.toggle("open");
}
#menu-icon
{
font-size: 35px;
color: var(--text-color);
cursor: pointer;
z-index: 10001;
display: none;
}
/* ini untuk mengatur tampilan hp */
@media (max-width: 1280px)
{
header
{
padding: 14px 2%;
transition: .2s;
}
.navbar a
{
padding: 5px 0;
margin: 0px 20px;
};
}
@media (max-width: 1090px)
{
#menu-icon
{
display: block;
}
.navbar
{
position: absolute;
top: 100%;
right: -100%;
width: 270px;
height: 29hv;
background: var(--main-color);
display: flex;
flex-direction: column;
justify-content: flex-start;
border-radius: 10px;
transition: all .50s ease;
}
.navbar .open
{
right: 2%;
}
}
<ul class="navbar">
<li><a href="#" class="active">HOME</a></li>
<li><a href="#">EVENT</a></li>
<li><a href="#">ABOUT</a></li>
</ul>
<div class="main">
<div class="bx bx-menu" id="menu-icon"></div>
</div>
</header>
<!-- js link -->
<script type="text/javascript" src="js/script">
</script>
