body {
margin: 0;
}
a{
text-decoration: none;
color: lightseagreen;
}
a:hover {
color: lightgray;
}
/* whole bar*/
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: white;
padding: 9px 12px;
}
/* Menu*/
.navbar_menu {
display: flex;
list-style:none;
padding-left:0;
font-size: 33px;
font-family: initial;
}
.navbar_menu li {
padding: 8px 30px;
display: inline;
}
.navbar_icons {
letter-spacing:30px;
list-style: none;
display: flex;
flex-direction: row;
width: 200px;
color: lightgray;
font-size: 2em;
padding-left:0;
}
/* Icons */
.navbar__icons li {
padding: 8px 12px;
display: none;
}
/* Toggle button */
.navbar_toogleBtn{
position: absolute;
/*화면이 작아졌을때만 나타남*/
display: none;
right: 32px;
font-size: 24px;
}
/*For small screen */
@media screen and (max-width: 768px){
/* Nav container */
.navbar{
flex-direction: column;
align-items: center;
padding: 8px 24px;
}
/* Menu */
.navbar_menu{
display: none;
flex-direction: column;
align-items: center;
padding: 5px 10px;
justify-content: center;
}
.navbar_menu li{
width: 100%;
text-align: center;
display: block;
}
.navbar__menu a {
/* Fill in an entire line so that user can click on any space */
display: block;
}
/* Icons */
.navbar_icons {
justify-content: center;
display: none;
flex-direction: row;
width: 100%;
font-size: 1.5em;
}
/* Toggle button */
.navbar_toogleBtn{
display: block;
}
/* When toggle button is clicked - active state */
.navbar_menu.active,
.navbar_icons.active {
display: flex;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="bar.css" />
<title>first page</title>
<script src="https://kit.fontawesome.com/265fcd9b69.js" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar">
<div class="navbar_logo">
<img src="logo.png" width="300" height="200">
</div>
<!-- Menu -->
<ul class="navbar_menu">
<!-- info.html, partner.html, free.html를 임의로 적어둠 -->
<li><a href="">Home</a></li>
<li><a href="Info.html">Information</a></li>
<li><a href="Partner.html">Partner</a></li>
<li><a href="Free.html">Freelencer</a></li>
<li><a href="Comunity.html">Comunity</a></li>
</ul>
<!-- Icons -->
<ul class="navbar_icons">
<li><a href="login.html"><i class="fas fa-sign-in-alt"></i></li>
<li><a href="register.html"><i class="far fa-registered"></i></li>
</ul>
<!-- Toggle button -->
<a href="#" class="navbar_toogleBtn">
<i class="fas fa-bars"> </i>
</a>
</nav>
<script type="text/javascript" src="bar.js" charset="utf-8" defer></script>
</body>
</html>const toggleBtn = document.querySelector('.navbar__toggleBtn');
const menu = document.querySelector('.navbar__menu');
const icons = document.querySelector('.navbar__icons');
toggleBtn.addEventListener('click', () => {
menu.classList.toggle('active');
icons.classList.toggle('active');
});我从YouTube视频教程中学习html / css / js。我正在学习如何编写js代码，但我不禁解决了一个问题。希望您能给我解决方案的人。
问题是关于add.EventListener的。我在控制台中看到了chrome中的代码，它显示：
“ bar.js：5未捕获的TypeError：无法读取null的属性'addEventListener'
我想在JS中使用切换隐藏和显示。
因为在js中指定了无效的元素类，所以出现了此错误（“ bar.js：5 Uncaught TypeError：无法读取null的属性'addEventListener'”）。
用这个：
const toggleBtn = document.querySelector('.navbar_toogleBtn');
const menu = document.querySelector('.navbar_menu');
const icons = document.querySelector('.navbar_icons');
由于您在html中的元素是：
<a href="#" class="navbar_toogleBtn">
...
<ul class="navbar_menu">
...
<ul class="navbar_icons">
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句