is a listener not working? what should i do?

You should remove parenthesis.

function myFunction1() {
    document.getElementById("nav-content").classList.toggle("show");
  }
// Just use `myFunction1`, not `myFunction1()`
  document.getElementById("nav-button").addEventListener("click", myFunction1);
// or you need to use arrow function 
  document.getElementById("nav-button").addEventListener("click", () => myFunction1());
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* ---------- navigation Bar content ---------- */
ul {
    list-style-type: none;
}

li a {
    width: 100%;
    color: black;
    display: block;
    border-left: 7px solid lightgrey;
    padding: 20px;
    text-decoration: none;
}

li a:hover {
    background-color: sandybrown;
    border-left: 7px solid rebeccapurple;
}

#nav-footer {
    width: 100%;
    background-color: rebeccapurple;
    color: white;
    min-height: 50px;
    text-align: center;
    margin-top: 60px;
}

#nav-footer h3 {
    position: relative;
    top: 10px;
}


/* ---------- navigation Bar content end ---------- */

/* ---------- Navigation Bar start ---------- */
nav {
    width: 100%;
    min-height: 50px;
    background-color: rebeccapurple;
}

#nav-button {
    float: right;
    margin-right: 20px;
    margin-top: 4px;
    position: relative;

    
}
/* disabled dropdown menu on hover 

#nav-button:hover #nav-content {
    display: block;
}
*/
.container {
    display: inline-block;
    cursor: pointer;
  }
  
  .bar1, .bar2, .bar3 {
    width: 35px;
    height: 5px;
    background-color: white;
    margin: 6px 0;
    transition: 0.4s;
  }
  
  .change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px);
    transform: rotate(-45deg) translate(-9px, 6px);
  }
  
  .change .bar2 {opacity: 0;}
  
  .change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px);
    transform: rotate(45deg) translate(-8px, -8px);
  }

  #nav-content {
      width: 300px;
      height: 300px;
      background-color:white;
      box-shadow: 1px 2px 1px lightgrey;
      border-left: 1px solid lightgrey;
      position: absolute;
      right: 100%;
  }

  .nav-content-hide {
      display: none;
  }

  .show {display:block;}

  

  /* ---------- Navigation Bar end ---------- */




  /* ---------- List styles start ---------- */

/* ---------- List styles end ---------- */
<body>
        <nav>
            <div></div>
            <div id="nav-button">
                <div class="container">
                <div class="bar1"></div>
                <div class="bar2"></div>
                <div class="bar3"></div>
            </div>
                <div id="nav-content" class="nav-content-hide">
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About Me</a></li>
                        <li><a href="#">Projects</a></li>
                    </ul>
                    <div id="nav-footer">
                        <h3>marcinprzytarski.com</h3>
                    </div>
                </div>

            </div>
        </nav>
        <script type="text/javascript" src="./script.js"></script>
    </body>

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top