Javascript – display: "none" does not work

i am beginner in programming so i have a little bit stupid question.
I am trying to programme my own e-shop (non-commercial of course) and i have problem with Javascript and display:"none". When i click on Log in Log in acc_drop change display to block, but if i click to close on x nothing happend. And console says the acc_drop display = "none". I don´t know where i have mistake.

Im from Czech Republic so don´t worry about the language 😀

Thank you for all reply. 🙂

window.onload = function () {
    let acc = document.querySelector(".acc");
    let accdrop = document.querySelector(".acc_drop");
    let closebtn = document.querySelector(".close");

    
    acc.onclick = function () {
        if (accdrop.style.display = "none") {
            accdrop.style.display = "block";
        }
    }

    closebtn.onclick = function() {
            accdrop.style.display = "none";
            console.log(accdrop.style.display);
    }
}
.acc{
    padding: 10px;
}
.acc .prihlaseni{
    color: #6B6B6B;
    cursor: pointer;
}
.acc .prihlaseni:hover{
    text-decoration: underline;
}

.acc .acc_drop{
    display: none;
    position: absolute;
    z-index: 80000;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #F5F5F5;
    box-shadow: 0 0 5px 0 ;
    width: 260px;
    height: 300px;
    border-radius: 5px;
    text-align: center;
}

.acc .acc_drop .close{
    position: absolute;
    top: 0;
    right: 0;
    font-size: 11px;
    color: #F5F5F5;
    background-color: #9e1b1b;
    border-radius: 0 5px 0 5px;
    padding: 5px;
    cursor: pointer;
}
.acc .acc_drop .close:active{
    background-color: #5f0606;
}
.acc .acc_drop .login-title{
    margin-top: 10px;
    font-size: 8px;
}
.acc .acc_drop form{
    display: flex;
    flex-direction: column;
    padding: 10px;
    text-align: left;
    margin: 0;
}
.acc label{
    text-align: left;
    font-size: 9px;
    font-weight: 400;
}
.acc .acc_drop input{
    width: 100%;
    height: 20px;
    margin-top: 8px;
    outline: none;
    border: 1px solid #6B6B6B;
    border-radius: 3px;
    box-shadow: 0 0 2px #00FFDD inset;
}
.acc .acc_drop .loginform{
    margin-top: 5px;
}

   
.acc .acc_drop input:focus, textarea:focus {
    box-shadow: 0 0 7px #00FFDD;
    border: 1px solid #6B6B6B;
}

.acc .acc_drop .reg{
    padding: 10px;
}
.acc .acc_drop .accbtn{
    height: 20px;
    margin-top: 10px;
    margin-bottom: 5px;
    border: none;
    background-color: #6B6B6B;
    border-radius:  5px ;
    color: #00FFDD;
    font-size: 9px;
    font-weight: 600;
    cursor: pointer;
    outline: none;
}
.acc .acc_drop a{
    color: #6B6B6B;
    text-decoration: underline;
    float: right;
    font-size: 9px;
}
.acc .acc_drop a:hover{
    text-decoration: none;
}
.acc .acc_drop .reg::before{
    content: "";
    display: block;

    border-bottom: 1px solid #6b6b6b86;
    width: 100%;
}
.acc .acc_drop .registr p{
    margin-top: 10px;
    font-size: 10px;
}
.acc .acc_drop .registr button{
    height: 20px;
    width: 100%;
    margin-top: 5px;
    border: none;
    background-color: #9e1b1b;
    border-radius: 5px ;
    color: #ffffff;
    font-size: 9px;
    font-weight: 600;
    cursor: pointer;
    outline: none;
}
.acc .acc_drop .accbtn:hover{
    background-color: #868686;
    transition: 1s;
}
.acc .acc_drop .registr button:hover{
    background-color: #e41919;
    transition: 1s;
}
.acc .acc_drop .accbtn:active{
    background-color: #474747;
    transition: none;
}
.acc .acc_drop .registr button:active{
    background-color: #5a0b0b;
    transition: none;
}
<div class="acc"> <h4 class="prihlaseni">Přihlásit se</h4>
                
                <div class="acc_drop">
                    <span class="close">x</span>
                    
                    <form action="">
                <div class="login-title"><h1>Přihlášení</h1></div>
                <div class="loginform mail">
                    <label>E-mail *</label>
                    <input class="e-mail" type="text" required>
                    </div>
                <div class="loginform heslo">
                    <label>Heslo *</label><a href="">Zapomněl(a) jsem heslo</a>
                    <input class="heslo" type="password"  required>
                    </div>
                <button class="accbtn" type="submit">Přihlásit se</button>
                    </form>
                <div class="reg">
                    <div class="registr">
                    <p>Ještě nemáte účet?</p>
                    <button>Zaregistrovat se</button>
                    </div>
                </div>
                </div>
                </div>

52 thoughts on “Javascript – display: "none" does not work”

Leave a Comment