0

I am completely unfamiliar with JS but i tried writing it using internet but for some reason i guess i am unable to connect my JS file to my HTML file or so for any reason the changes are not visible. The JS is for my navbar.

Below is the HTML code snippet of navbar

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- JS file -->
    <script type="text/javascript" src="Styles/app.js"></script>

    <!-- CSS file  -->
    <link rel="stylesheet" href="Styles/index.css" />

    <!-- Icon file -->
    <link
      rel="stylesheet"
      href="Assets/fontawesome-free-6.2.1-web/css/all.css"
    />
    <title>Tea Station - Home</title>
  </head>

  <body>
    <!-- navbar -->
    <!-- nav items -->
    <nav class="navbar" id="navbar">
      <div class="navbar-header">
        <span class="close-btn" id="nav-close">
          <i class="fa-solid fa-xmark"></i>
        </span>
      </div>

      <ul class="nav-items">
        <li >
          <a href="#" class="nav-links">home</a>
        </li>
        <li >
          <a href="#" class="nav-links">skills</a>
        </li>
        <li >
          <a href="#" class="nav-links">products</a>
        </li>
        <li >
          <a href="#" class="nav-links">about</a>
        </li>
      </ul>
    </nav>


    <!-- nav button -->
    <span class="nav-btn" id="nav-btn" >
      <i class="fa-solid fa-bars"></i>
    </span>

below is the code of the JS file

// setup date
const date = (document.getElementById("date").innerHTML =
  new Date().getFullYear());
// setup nav
const navBtn = document.getElementById("nav-btn");
const navbar = document.getElementById("navbar");
const navClose = document.getElementById("nav-close");
// show nav
navBtn.addEventListener("click", () => {
  navbar.classList.add("showNav");
});
// close nav
navClose.addEventListener("click", () => {
  navbar.classList.remove("showNav");enter image description here
});

The navbar is supposed to open/displayed when the nav button is clicked but it isn't happening so. Since i am unfamiliar with JS i am unable to find out the cause.

adivee
  • 1
  • 3
  • This is a good time to start familiarizing yourself with your browser's development tools. When you open those tools, observe any errors on the console. – David Jan 31 '23 at 13:38
  • i have found following errors on the console: Uncaught TypeError: Cannot set properties of null (setting 'innerHTML') at app.js:2:57 Failed to load resource: the server responded with a status of 404 (Not Found) can you just brief me what might be wrong ? – adivee Jan 31 '23 at 13:46
  • The linked duplicate addresses the first of those errors. The second error is something you can continue to research. The main point is that these developer tools are fundamentally important for any web development you do and you'll want to continue to use them to debug and refine your code. – David Jan 31 '23 at 13:47
  • There are some issue in you javascript update your code with following `const date = document.getElementById("date").innerHTML = new Date().getFullYear();` – Super User Jan 31 '23 at 14:04

0 Answers0