Cannot read read property 'style' of null

Question

I'm getting the error: cannot read property 'style' of null. Can someone help me with this, first I thought that it was an error of me placing my js incorrectly but it looks like it doesn't matter if the script is in the beginning or the end at the document

The HTML/JS:

<html lang="en">
    <head>
        <link href="https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="style.css">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Hamburger-menu</title>
    </head>
    <body>
        <header>
            <button id="knop" onclick="showFunction()">☰</button>
            <div class="hamburger-container">
                <ul>
                    <li>dit</li>
                    <li>is</li>
                    <li>een</li>
                    <li>test</li>
                </ul>
            </div>
        </header>
        <script>
        function showFunction() {
            document.getElementById("hamburger-container").style.visibility = "visible";
        } 
        </script>
    </body>
    </html>

The CSS:

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
  }
  
  a {
    text-decoration: none;
  }
  
  ul {
     list-style: none;
     text-align: center;
     margin: 2rem;
  }

  ul li {
      margin: 1rem;
      font-family: 'Open Sans Condensed', sans-serif;
      font-size: 25px;
  }

  .hamburger-container {
      visibility: hidden;
      background-color: turquoise;
      width: 256px;
      height: 256px;
      margin: 0;
      position: absolute;
      top: 30%;
      left: 80%;
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
  }

  button {
    background-color: turquoise;
    border: none;
    color: white;
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 1rem;
    transition: transform 0.3s ease-in-out;
  }

  button:hover {
    cursor: pointer;
    background-color: rgb(131, 247, 235);
  }

  button:active {
    transform: translateX(-100px);
  }

I'd really appreciate it if someone wants to help me.

`class` != `id`. If you want to find that element by its class, use `document.querySelector(".hamburger-container")`, not `document.getElementById("hamburger-container")`. — T.J. Crowder, Nov 06 '20 at 15:40

Cannot read read property 'style' of null

0 Answers0