in

Why doesn`t work my popup, although I connect Js?


Yesterday I made a popup in Html, Css and JS but it didn`t work.
Here ist the Code:

-Html-

<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Navbar</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="style.css">
        <script src="main.js"></script>
        <link href="https://fonts.googleapis.com/css?family=Montserrat:500&display=swap" rel="stylesheet">
    </head>
    <body>
        
        <header>
            <a class="logo" href="#"><img src="LogoGro.png" height="80" width="300" alt="logo"></a>
            <nav>
                <ul class="nav__links">
                    <button>Skins</button>
                    <button onclick="togglePopup()">Codes</button>
                    <li><a href="#">Download</a></li>
                </ul>
                <div class="popup" id="popup">
                    <div class="overlay"></div>
                    <div class="content">
                      <div class="close-btn" onclick="togglePopup()">&times;</div>
                      <h1>title</h1>
                    </div> 
                 </div>
            </nav>
            <a class="cta" href="https://discord.gg/7S4FaYEw">Discord Server</a>
        </header>
        <main>
            
        </main>
    </body>
</html>

-Css-

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  
  header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 10%;
    background-color: #24252a;
  }
  
  .logo {
    cursor: pointer;
  }
  
  .nav__links a,
  .cta,
  .overlay__content a {
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    color: #edf0f1;
    text-decoration: none;
  }
  
  .nav__links {
    list-style: none;
    display: flex;
  }
  
  .nav__links li {
    padding: 0px 20px;
  }
  
  .nav__links li a {
    transition: color 0.3s ease 0s;
  }
  
  .nav__links li a:hover {
    color: #0088a9;
  }
  
  .cta {
    padding: 9px 25px;
    background-color: rgba(0, 136, 169, 1);
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: background-color 0.3s ease 0s;
  }
  
  .cta:hover {
    background-color: rgba(0, 136, 169, 0.8);
  }
  
  /* Mobile Nav */
  
  .menu {
    display: none;
  }
  
  .overlay {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    background-color: #24252a;
    overflow-x: hidden;
    transition: width 0.5s ease 0s;
  }
  
  .overlay--active {
    width: 100%;
  }
  
  .overlay__content {
    display: flex;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  
  .overlay a {
    padding: 15px;
    font-size: 36px;
    display: block;
    transition: color 0.3s ease 0s;
  }
  
  .overlay a:hover,
  .overlay a:focus {
    color: #0088a9;
  }
  .overlay .close {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
    color: #edf0f1;
  }
  
  @media screen and (max-height: 450px) {
    .overlay a {
      font-size: 20px;
    }
    .overlay .close {
      font-size: 40px;
      top: 15px;
      right: 35px;
    }
  }
  
  @media only screen and (max-width: 800px) {
    .nav__links,
    .cta {
      display: none;
    }
    .menu {
      display: initial;
    }
  }
  .togglebutton {
      border-color: #0088a9;
  }
 
#pop-up {
    position: fixed;
    top: 0; left: 0;
    z-index: 999;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.8);
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s;
  }
  #pop-up.open {
    visibility: visible;
    opacity: 1;
  }
  
  #pop-box {
    position: relative;
    max-width: 400px;
    background: #fff;
    margin: 50vh auto 0 auto;
    transform: translateY(-50%);
  }
  
  #pop-title {
    padding: 10px;
    margin: 0;
    background: #921515;
    color: #fff;
  }
  
  #pop-text {
    padding: 10px;
    margin: 0;
    background: #fff;
    color: #555;
  }
  
  #pop-close {
    position: absolute;
    top: 0; right: 5px;
    padding: 5px;
    color: #ffdcdc;
    font-size: 32px;
    cursor: pointer;
  }

-Js-

function togglePopup() {
    document.getElementById("popup").classList.toggle("active");
}

Javascript is connected with the Html file, the button can you see on the header everytime, but I`ll that when I click on the button “Codes” that a popup open…
In a other project from me the popup works with the same code…
What shall I do that it works? Or what is the mistake in the code?



Source: https://stackoverflow.com/questions/70608242/why-doesnt-work-my-popup-although-i-connect-js

Secure web api using jwt token and caching mechanism

Unknown flag: –generator?