【发布时间】：2021-03-07 23:39:39
【问题描述】：
这是我的 app.js
const navBtn = document.getElementById("nav-btn");
const navbar = document.getElementById("navbar");
const navClose = document.getElementById("nav-close");
navBtn.addEventListener("click", () => {
navbar.classList.add("showNav");
});
navClose.addEventListener("click", () => {
navbar.classList.remove("showNav");
});
html
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Delights || Home</title>
<!-- font-awesome -->
<link rel=" stylesheet " href="{% static 'hotel/fontawesome-free-5.7.2-web/css/all.css' %} " />
<!-- custom css -->
<link rel="stylesheet " href="{% static 'hotel/css/styles.css' %} " />
</head>
<body>
<!-- nav button -->
<span class="nav-btn " id="nav-btn ">
<i class="fas fa-bars "></i>
</span>
<!-- nav -->
<nav class="navbar " id="navbar ">
<div class="navbar-header ">
<span class="nav-close " id="nav-close ">
<i class="fas fa-times "></i>
</span>
</div>
<ul class="nav-items ">
<li><a href="index.html " class="nav-link ">Admin</a></li>
<li><a href='' class="nav-link ">Employee</a></li>
<li><a href="about.html " class="nav-link ">about</a></li>
<li><a href="products.html " class="nav-link ">products</a></li>
<li><a href="register.html " class="nav-link ">Not a customer</a></li>
</ul>
</nav>
<!-- header -->
<header class="header ">
<div class="banner ">
<h3 class="banner-subtitle ">Over one hunred flavors of tea</h3>
<h1 class="banner-title ">specially crafted tea</h1>
<!-- <a href="skills.html " class="banner-btn ">explore</a> -->
</div>
</header>
<div class="content-divider "></div>
<!-- skills section -->
<section class="skills clearfix ">
<!-- single skill -->
<article class="skill ">
<span class="skill-icon ">
<i class="fas fa-snowflake "></i>
</span>
<h3 class="skill-title ">super view</h3>
<!-- ten words -->
<p class="skill-text ">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, sequi.
</p>
</article>
<!-- end of single skill -->
<!-- single skill -->
<article class="skill ">
<span class="skill-icon ">
<i class="far fa-bookmark "></i>
</span>
<h3 class="skill-title ">Best in class</h3>
<!-- ten words -->
<p class="skill-text ">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, sequi.
</p>
</article>
<!-- end of single skill -->
<!-- single skill -->
<article class="skill ">
<span class="skill-icon ">
<i class="fas fa-glass-cheers "></i>
</span>
<h3 class="skill-title ">Drinks</h3>
<!-- ten words -->
<p class="skill-text ">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, sequi.
</p>
</article>
<!-- end of single skill -->
<!-- single skill -->
<article class="skill ">
<span class="skill-icon ">
<i class="fas fa-medal "></i>
</span>
<h3 class="skill-title ">hotel of the year</h3>
<!-- ten words -->
<p class="skill-text ">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, sequi.
</p>
</article>
<!-- end of single skill -->
</section>
<!--end of skills section -->
<!-- about -->
<section class="about ">
<div class="section-center clearfix ">
<article class="about-img ">
<div class="about-picture-container ">
<img src="{% static 'hotel/images/about-bcg.jpeg' %} " alt="tea kettle " class="about-picture " />
</div>
</article>
<article class="about-info ">
<!-- section title -->
<div>
<h3 class="section-subtitle ">about our</h3>
<h2 class="section-title ">tea station</h2>
</div>
<!-- section title -->
<p class="about-text ">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus numquam rem eos vel consequuntur obcaecati?
</p>
<p class="about-text ">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus numquam rem eos vel consequuntur obcaecati?
</p>
<!-- <a href="about.html " class="main-btn ">learn more</a> -->
</article>
</div>
</section>
<!-- end of about -->
<!-- products -->
<section class="products ">
<div class="section-center clearfix ">
<!-- products info -->
<article class="products-info ">
<!-- title -->
<div>
<h3 class="section-subtitle ">check out</h3>
<h2 class="section-title text-white ">our products</h2>
</div>
<!-- end of title -->
<p class="product-text ">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod, quae vitae! Natus sed fugiat id laudantium nemo, asperiores corporis amet!
</p>
<!-- <a href="products.html " class="main-btn ">inventory</a> -->
</article>
<!-- end of products info -->
<!-- products inventory -->
<article class="products-inventory clearfix ">
<!-- single product -->
<div class="product ">
<img src="{% static 'hotel/images/product-1.jpeg' %} " alt="single product " class="product-img " />
<h3 class="product-title ">product title</h3>
<h3 class="product-price ">$6.99</h3>
</div>
<!--end of single product -->
<!-- single product -->
<div class="product ">
<img src="{% static 'hotel/images/product-2.jpeg' %} " alt="single product " class="product-img " />
<h3 class="product-title ">product title</h3>
<h3 class="product-price ">$6.99</h3>
</div>
<!--end of single product -->
<!-- single product -->
<div class="product ">
<img src="{% static 'hotel/images/product-3.jpeg' %} " alt="single product " class="product-img " />
<h3 class="product-title ">product title</h3>
<h3 class="product-price ">$6.99</h3>
</div>
<!--end of single product -->
</article>
<!--end of products inventory -->
</div>
</section>
<!-- end of products -->
<!-- contact -->
<section class="contact ">
<div class="section-center clearfix ">
<!-- contact info -->
<article class="contact-info ">
<!-- contact item -->
<div class="contact-item ">
<!-- contact text -->
<h3 class="contact-title ">
<span class="contact-icon ">
<i class="fas fa-location-arrow "></i> </span
>address
</h3>
<h3 class="contact-text ">
523 N Fairfax Ave, Los Angeles, CA 90048
</h3>
</div>
<!-- end of contact item -->
<!-- contact item -->
<div class="contact-item ">
<!-- contact text -->
<h3 class="contact-title ">
<span class="contact-icon "> <i class="fas fa-envelope "></i> </span
>email
</h3>
<h3 class="contact-text ">
email@email.com
</h3>
</div>
<!-- end of contact item -->
<!-- contact item -->
<div class="contact-item ">
<!-- contact text -->
<h3 class="contact-title ">
<span class="contact-icon ">
<i class="fas fa-phone-square "></i> </span
>telephone
</h3>
<h3 class="contact-text ">
+ 123 456 789
</h3>
</div>
<!-- end of contact item -->
</article>
<article class="contact-form ">
<i class=" fas fa-umbrella-beach fa-3x "></i>
<h3 class="contact-title ">
<span class="contact-icon "> </span
>Online Booking
</h3>
<!-- <input
type="email "
name="email "
placeholder="Email Id "
maxlength="25 "
class="form-control "
/>
<input
type="datetime "
name="date "
placeholder="Date "
maxlength="25 "
class="form-control "
/> -->
<a class="new-btn " value="Book Now " href="onlinebooking "></a>
<!-- <input type ="submit " class="new-btn-2 " value="Register "></input> -->
<!-- <button class="new-btn-2 " >Register</button> -->
</div>
<!-- <form action="https://www.google.com ">
<button class = "new-btn-2 " type="submit ">
Register
</button>
</form> -->
</article>
<!-- end of contact info -->
</div>
</section>
<!-- end o fcontact -->
<footer class="footer ">
<div class="section-center ">
<div class="social-icons ">
<!-- social icon -->
<a href="onlinebooking " class="social-icon ">
<i class="fab fa-facebook "></i>
</a>
<!-- end of social icon -->
<!-- social icon -->
<a href="# " class="social-icon ">
<i class="fab fa-twitter "></i>
</a>
<!-- end of social icon -->
<!-- social icon -->
<a href="# " class="social-icon ">
<i class="fab fa-instagram "></i>
</a>
<!-- end of social icon -->
</div>
<p class="footer-text ">
©2019 <span class="text-primary ">tea station</span>. all rights reserved
</p>
</div>
</footer>
<script src="{% static 'hotel/app.js' %}"></script>
</body>
</html>
我已将脚本标记放在我的 html 中的正文标记的末尾。我使用 django 作为我的后端，并且由于我没有收到 404 错误，因此已正确加载了 javascript 文件。实际上几天前，当我浏览我的页面时，一切似乎都很好。 js工作得很好。 需要一些帮助来解决问题。谢谢
【问题讨论】：
-
似乎是一个异步问题。你可以试试 setTimeout。
标签： javascript django frontend typeerror addeventlistener