Javascript - display: "none" does not work

Question

I am trying to programme my own e-shop (non-commercial of course) and I have a problem with JavaScript and display:"none". When I click on Log in <h4 class="login">Log in</h4> acc_drop changes display to block, but if I click to close on <span class="close">x</span> nothing happens. And console says the acc_drop display = "none". I don't know where I have mistake.

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>

score 3 · Answer 1 · answered Jan 31 '21 at 04:33

The problem is with your if condition inside acc.onclick:

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

Instead of comparing, you are asigning the value:

if (accdrop.style.display = "none")

It should be instead:

if (accdrop.style.display === "none")

buzatto · Answer 2 · 2021-01-31T05:01:05.213

closebtn is inside acc. When you click on close the event bubbles back up, hitting both event handlers. you can avoid that by calling event.stopPropagation():

closebtn.onclick = function() {
        accdrop.style.display = "none";
        console.log(accdrop.style.display);
        event.stopPropagation();
}

also, you should check the display property value from accdrop differently. When you validate by accdrop.style.display, it won't work as expected because your css class with display: none won't trigger. It will validate versus style attribute only, and not its computed value:

   acc.onclick = function () {
        const accdropDisplayValue = window.getComputedStyle(accdrop)
                                          .getPropertyValue('display');

         if (accdropDisplayValue === "none") {
             accdrop.style.display = "block";
         }
    }

score 0 · Answer 3 · answered Jan 31 '21 at 04:36

Also can try registering an event on just h1

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

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

score 0 · Answer 4 · answered Jan 31 '21 at 05:12

Try this:

.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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="acc">
  <h4 class="prihlaseni" onclick='document.querySelector(".acc_drop").style.display = "block";'>Přihlásit se</h4>

  <div class="acc_drop">
    <span class="close" onclick='document.querySelector(".acc_drop").style.display = "none";'>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>

I just changed the JavaScript into inline JavaScript which fixed the problem and saves you some space:

onclick='document.querySelector(".acc_drop").style.display = "block";'

and

onclick='document.querySelector(".acc_drop").style.display = "none";'

Javascript - display: "none" does not work

4 Answers4