CODEWITHSUNDEEP
javascriptdjangofrontendtypeerroraddeventlistener
Suraj
Suraj

Reputation: 155

app.js:6 Uncaught TypeError: Cannot read property 'addEventListener' of null

Here is my 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 protected]
            </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 ">
          &copy;2019 <span class="text-primary ">tea station</span>. all rights reserved
                        </p>
                </div>
                </footer>
                <script src="{% static 'hotel/app.js' %}"></script>
</body>

</html>

I have placed the script tag at the end of the body tag in my html. I am using django as my backend and the javascript files have been loaded properly as I am not getting a 404 error. Actually couple of days ago when i looked through my page everything seemed fine. The js worked perfectly fine. Need some help to resolve the issue. Thank you

Upvotes: 0

Views: 530

Answers (2)

Alo
Alo

Reputation: 1056

Sometimes you will have to place the scripts to the bottom of your code which simply fixes the problem. Example.

<head> ... </head>
<body> ... </body>
<script> your code here </script>

Upvotes: 1

Suraj
Suraj

Reputation: 155

None of the answers in stackoverflow were helpful to me. I would like to add a solution to this. I solved this issue by deleting all the .js files in the project and later adding them again. After running my project without javascript and later adding it solved the issue for me.

Upvotes: 0

Related Questions