Question 49366 in Photoshop Question posted in
The official user guide can be found here.

Trying to use javascript with toggle to open navbar /hamburger menu with simple js, but says error on a null property – Photoshop

I got an assignment due in 2 days, where its required to use javascript, and I’m trying to get this navbar turning into a burger-menu when its on mobile-view with js to work (needs to be responsive). I found this simple code, and it worked until the last 2 lines…


const burgerMenu = document.querySelector(".burger_menu");
const navLinks = document.querySelector(".nav-links");

burgerMenu.addEventListener("click", () => {

  
  navLinks.classList.toggle(".mobile-menu");
});

It states this, when I open Inspect => Console: "Uncaught TypeError: Cannot read properties of null (reading ‘addEventListener’)
at nav.js:11:12"

This works on this French guy’s video its from, but I wonder if its the code thats wrong? typo I’m not seeing?

Any suggestions? any help would be much appreciated! 🙏

//video its from: https://www.youtube.com/watch?v=HQopEEurQYE&ab_channel=LiveCode

[HTML] 
<!DOCTYPE html>
<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" />
    <link rel="stylesheet" href="css/generel.css" />
    <link rel="stylesheet" href="css/layout.css" />
    <title>Grid Example 01</title>
  </head>
  <body>
    <header>
      <nav class="navbar">
        <a class="logo" href="index.html">Amalia</a>
        <div class="nav-links">
          <ul>
            <li><a class="active" href="#">FORSIDE</a></li>
            <li><a href="#">OPGAVER</a></li>
            <li><a href="#">OM MIG</a></li>
          </ul>
        </div>
        <img
          class="burger-menu"
          src="./icons/burger_btn.png"
          alt="burger menu"
        />
      </nav>
    </header>

    <main class="grid_1-1">
      <section>
        <h1>Om Mig</h1>
        <hr />
        <p>
          Mit navn er blaaaaah, og jeg i gang med min nuværende
          uddannelse på blaaah, som multimedie- og design student!
        </p>
        <p>
          Uddannelsen fandt min interesse, da jeg altid har været på den
          kreative side, og jeg vil generelt gerne udforske og lære mulighederne
          inden for frontend og web design, hvilket Multimedie- og design
          uddannelsen bringer.
        </p>
        <p>
          Min tidligere uddannelse på blaaaah mediefagslinje på
          engelsk, har erfaret mig med med programmer såsom: Photoshop, Premier
          Pro, Final Cut Pro - men også banet vej for mit freelance arbejde som
          fotograf.
        </p>

        <p>
          Således, tror jeg også mine generelle interesser og kompetencer inden
          for kunst, fotografi, filmproduktion og videoredigering - har bragt
          mig på disse baner.
        </p>

        <p>Så alt i alt, har den kreative industri har altid lokket mig!</p>
        <div class="box-btn-i">
          <ul>
            <li>
              <a
                class="btn"
                href="./data/info.txt"
                download="CV_Amalia"
                >CV</a
              >
            </li>
            <li><a class="btn" href="about.html">PROJEKTER</a></li>
          </ul>
        </div>
      </section>

      <img src="/img_ama/mig_amalia.jpg" alt="amalia" />
    </main>

    <footer>
      <p>&copy;Amalia 2023</p>
      <ul>
        <li>
          <a href="#">LinkedIn</a>
        </li>
        <li>
          <a href="#">Instagram</a>
        </li>
      </ul>
    </footer>
  </body>
  <script src="nav.js"></script>
</html>
[the CSS for this] 
body {
  margin: 0;
  /* De næste tre linjer er for at lave en "sticky footer" */
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

main {
  padding: 1em;
}

img {
  max-width: 100%;
}

nav > ul {
  list-style: none;
  /* De næste fire linjer placerer menuen i center */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
  padding: 0;
}

@media (min-width: 800px) {
  .grid_1-1 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1em;
    max-width: 1200px;
    justify-self: center;
  }
}

.navbar .burger-menu {
  display: none;
  position: absolute;
  width: 35px;
  top: 50px;
  right: 50px;
}

@media screen and (max-width: 900px) {
  .navbar {
    padding: 0;
  }

  .navbar .logo {
    position: absolute;
    top: 50px;
    left: 50px;
  }

  .nav-links {
    /* display: none; */
    top: 0;
    left: 0;
    position: absolute;
    background-color: rgba(146, 189, 202, 0.252);
    backdrop-filter: blur(7px);
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: -100%;
    transition: all 0.8s ease;
  }

  .nav-links ul {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .navbar .nav-links ul li {
    margin: 25px;
    font-size: 2em;
  }

  .navbar .burger-menu {
    display: block;
  }
}

I’ve tried other solutions, but none seem to work when I try. Just need a simple js code nothing complex as I’m a beginner, so I’m also doubting my knowledge on this issue a lot. (we’re not allowed to use frameworks, yet this is required and they haven’t taught us how to implement a burger menu yet/it was brushed over…).

Thank you for anyone trying and reading this.

Tags:

2

Answers


  1. 0

    You are getting an error because burgermenu is undefined. This is because you declared it like this document.querySelector(".burger_menu"); with an underscore instead of a – symbol.
    Basically querySelector can’t find the element with that class because "burger_menu" != "burger-menu". The correct code would be:

    document.querySelector(".burger-menu");
    Login or Signup to reply.
  2. 0

    There seem to be a typo in the script, burger-menu should be there in place of the burger_menu. Please notice the underscore vs the dash. The class names must match exactly.

    The HTML code defines class="burger-menu" on the img tag, while the script queries for a non-existent class via document.querySelector(".burger_menu").

    The possible fix is to simply use document.querySelector(".burger-menu").

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search