stackoom
  简体   繁体   中英

Stuck at this error: Uncaught TypeError: Cannot read property 'classList' of null at HTMLDivElement.<anonymous>

 原文  2020-12-24 13:23:54  0   1    javascript/ html/ css/ dom-events

Question

I started trying to write some kind of thing in VS Code, and I thought I can try to make a mobile GUI, but I can't open the menu, due to some error, at JavaScript (starting at line 230, problem at line 238):

Uncaught TypeError: Cannot read property 'classList' of null at HTMLDivElement.<anonymous>

I know what is happening, but I don't know how to put it to work.

This is what I scripted so far: 

 const navSlide = () => { const burger = document.querySelector('.burger'); const nav = document.querySelector('.nav_links'); burger.addEventListener('click', () => { nav.classList.toggle('nav-active'); }); } navSlide();
 @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap'); .Buton_YT { font-size: 34px; padding: 5px 10px; border: 3px solid #000000; border-radius: 5px; text-decoration: none; display: inline-block; color: #09ff00; transition-duration: 0.2s; background-color: none; width: 120px; text-align: center; cursor: none; position: absolute; top: 30px; font-family: 'arial', cursive; }::selection { color:white; background-color: rgb(60, 255, 0); }.Buton_YT:hover { color: #ffffff; background-color: #ff0000; box-shadow: 5px #000000; }.Buton_YT:active { transition-duration: 100ms; background-color: #ff0000; box-shadow: 0 5px rgb(20, 20, 20); transform: translateY(4px); }.div1 { width: 500; height: 100; color: #00ffff; display: inline-block; position: absolute; } * { box-sizing: border-box; margin: 0px; padding: 0px; background-color: #333333; } li, a, .Buton_YT{ font-family: "Montserrat", sans-serif; font-weight: 500; font-size: 18px; color: #edf0f1; text-decoration: none; justify-content: end; } header { display: flex; justify-content: space-between; align-items: center; padding: 3px 1%; border: black 2px solid; background-color: #202020; } nav { background-color: #202020; }.logo { cursor: not-allowed; margin-right: auto; } /*.name { cursor: not-allowed; margin-right: flex-end; }*/.nav__links { list-style: none; background-color: #202020; }.nav__links li { display: inline-block; padding: 0px 20px; background-color: #202020; }.nav__links li a { transition-delay: 500ms; transition: all 0.2s ease 0s; background-color: #202020; }.nav__links li a:hover { color: rgba(0, 128, 160, 0.6); }.nav__links li a:active { color: rgba(0, 136, 169, 0.1); transition: all 0.001s ease 0s; }.buton_nav { padding: 9px 20px; background-color: rgba(0, 136, 169, 1); border: none; border-radius: 50px; cursor: pointer; transition: all 0.3s; }.buton_nav:hover { background-color: rgba(0, 128, 160, 0.6); transition: all 0.1s ease 0s; }.buton_nav:active { background-color: rgba(0, 136, 169, 0.3); }.burger{ display: none; cursor: pointer; }.burger div { width: 25px; height: 3px; background-color: rgb(255, 255, 255); margin: 5px; border-radius: 10px; color: #202020; } @media screen and (max-width: 720px) { body { overflow-x: hidden; }.nav__links{ position: absolute; right: 00px; height: 92vh; top: 54.5px; background-color: #202020; display: flex; flex-direction: column; align-items: center; width: 150px; transform: translateX(100%); line-height: 110px; transition: transform 0.5 ease-in; }.nav__links li { opacity: 30%; }.burger{ display: block; background-color: #202020; } }.nav-active { transform: translateX(0px); }
 <,DOCTYPE html> <html lang="en"> <head> <title>TESTE 2</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1"> <header> <img class="logo" src="Logo.jpg" alt="logo" width="80px" height="45px"><img> <div class="name"> <h4 class="name"> </h4> </div> <nav> <ul class="nav__links"> <li> <a href="Projects.html">Proiecte</a> </li> <li> <a href="About.html">Despre</a> </li> <li> <a href="Pagini.html">Pagini</a> </li> <li> <a href="test_2.html">Acasa</a> </li> </ul> <div class="burger"> <div class="burger1"></div> <div class="burger2"></div> <div class="burger3"></div> </div> </nav> <a class="buton_nav" href="Contact.html">Contact</a> </header> </head> <body> <p>Text to test selection colors</p> <div class="div1"> <a button class="Buton_YT" href="#" target="_blank">Buton YT</a> </div> </body> </html>

1 answers

solution1
 -2 ACCPTED  2020-12-24 13:29:26

<html lang="en">
  <head>
<title>TESTE 2</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
  @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap");

  .Buton_YT {
    font-size: 34px;
    padding: 5px 10px;
    border: 3px solid #000000;
    border-radius: 5px;
    text-decoration: none;
    display: inline-block;
    color: #09ff00;
    transition-duration: 0.2s;
    background-color: none;
    width: 120px;
    text-align: center;
    cursor: none;
    position: absolute;
    top: 30px;
    font-family: "arial", cursive;
  }

  ::selection {
    color: white;
    background-color: rgb(60, 255, 0);
  }

  .Buton_YT:hover {
    color: #ffffff;
    background-color: #ff0000;
    box-shadow: 5px #000000;
  }

  .Buton_YT:active {
    transition-duration: 100ms;
    background-color: #ff0000;
    box-shadow: 0 5px rgb(20, 20, 20);
    transform: translateY(4px);
  }

  .div1 {
    width: 500;
    height: 100;
    color: #00ffff;
    display: inline-block;
    position: absolute;
  }

  * {
    box-sizing: border-box;
    margin: 0px;
    padding: 0px;
    background-color: #333333;
  }

  li,
  a,
  .Buton_YT {
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: 18px;
    color: #edf0f1;
    text-decoration: none;
    justify-content: end;
  }

  header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 1%;
    border: black 2px solid;
    background-color: #202020;
  }

  nav {
    background-color: #202020;
  }

  .logo {
    cursor: not-allowed;
    margin-right: auto;
  }

  /*.name {
  cursor: not-allowed;
  margin-right: flex-end;
}*/

  .nav__links {
    list-style: none;
    background-color: #202020;
  }

  .nav__links li {
    display: inline-block;
    padding: 0px 20px;
    background-color: #202020;
  }

  .nav__links li a {
    transition-delay: 500ms;
    transition: all 0.2s ease 0s;
    background-color: #202020;
  }

  .nav__links li a:hover {
    color: rgba(0, 128, 160, 0.6);
  }

  .nav__links li a:active {
    color: rgba(0, 136, 169, 0.1);
    transition: all 0.001s ease 0s;
  }

  .buton_nav {
    padding: 9px 20px;
    background-color: rgba(0, 136, 169, 1);
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s;
  }

  .buton_nav:hover {
    background-color: rgba(0, 128, 160, 0.6);
    transition: all 0.1s ease 0s;
  }

  .buton_nav:active {
    background-color: rgba(0, 136, 169, 0.3);
  }

  .burger {
    display: none;
    cursor: pointer;
  }

  .burger div {
    width: 25px;
    height: 3px;
    background-color: rgb(255, 255, 255);
    margin: 5px;
    border-radius: 10px;
    color: #202020;
  }

  @media screen and (max-width: 720px) {
    body {
      overflow-x: hidden;
    }

    .nav__links {
      position: absolute;
      right: 00px;
      height: 92vh;
      top: 54.5px;
      background-color: #202020;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 150px;
      transform: translateX(100%);
      line-height: 110px;
      transition: transform 0.5 ease-in;
    }

    .nav__links li {
      opacity: 30%;
    }

    .burger {
      display: block;
      background-color: #202020;
    }
  }

  .nav-active {
    transform: translateX(0px);
  }
</style>
  </head>
  <body>
    <header>
  <img
    class="logo"
    src="Logo.jpg"
    alt="logo"
    width="80px"
    height="45px"
  /><img />
  <div class="name">
    <h4 class="name"></h4>
  </div>
  <nav>
    <ul class="nav__links">
      <li>
        <a href="Projects.html">Proiecte</a>
      </li>
      <li>
        <a href="About.html">Despre</a>
      </li>
      <li>
        <a href="Pagini.html">Pagini</a>
      </li>
      <li>
        <a href="test_2.html">Acasa</a>
      </li>
    </ul>
    <div class="burger">
      <div class="burger1"></div>
      <div class="burger2"></div>
      <div class="burger3"></div>
    </div>
  </nav>
  <a class="buton_nav" href="Contact.html">Contact</a>
    </header>
    <p>Text to test selection colors</p>

    <div class="div1">
      <a button class="Buton_YT" href="#" target="_blank">Buton YT</a>
    </div>

    <script>
      const navSlide = () => {
        const burger = document.querySelector(".burger");
        const nav = document.querySelector(".nav__links");

        burger.addEventListener("click", () => {
          nav.classList.toggle("nav-active");
        });
      };

      navSlide();
    </script>
  </body>
</html>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Uncaught TypeError: Cannot read property 'classList' of null at HTMLDivElement.<anonymous> Uncaught TypeError: Cannot read properties of null (reading 'classList') at HTMLDivElement.<anonymous> Uncaught TypeError: Cannot read properties of undefined (reading 'className') at HTMLDivElement.<anonymous> Uncaught TypeError cannot read property 'classlist' of null uncaught TypeError: Cannot read property 'classList' of null Uncaught TypeError: Cannot read property 'classList' of null Cannot solve Uncaught TypeError: Cannot read property 'classList' of null Uncaught TypeError: Cannot read property 'classList' of null at method *ngFor Uncaught TypeError: Cannot read property 'classList' of null Javascript - Uncaught TypeError: Cannot read property 'classList' of null
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM