lundi 12 juillet 2021

Javascript - If condition does not work properly

i would love to do when i click on button it shows content and get classlist ("pm_sl_active") to get color and font-weight and if i click the second button the content, color and weight of the first button disappear.

I don´t know if i have mistake in if condition.

Thank you for all replies.

let p_m = document.body.querySelector(".p_m");
let s_l = document.body.querySelector(".s_l");

let poledniMenu = document.body.querySelector(".poledniMenu");
let stalyListek = document.body.querySelector(".stalyListek");

if (poledniMenu.style.display === "block") {
    p_m.classList.add("pm_sl_active");

} else{
    p_m.addEventListener("click", ()=> {
        poledniMenu.style.display = "block";
        stalyListek.style.display = "none"; 
    });
}



if (stalyListek.style.display === "block") {
    s_l.classList.add("pm_sl_active");

} else{
    s_l.addEventListener("click", ()=> {
        stalyListek.style.display = "block";
        poledniMenu.style.display = "none"; 
        s_l.classList.remove("pm_sl_active");
    });
}
button{
  padding: 10px 30px;
  margin: 0;
  cursor: pointer;
}

.pm_sl_active{
  color: rgb(255, 87, 87);
  font-weight: 800;
}

.poledniMenu{
display:block;
}

.stalyListek{
display: none;
}
<button class="p_m">Polední menu</button>
<button class="s_l">Stálý lístek</button>

<div class="poledniMenu">
  <h3>POLEDNÍ MENU <br>
      25.6.2021</h3>
  <p>Rozvoz z technických důvodů není.<br>
     Děkujeme za pochopení.</p>
</div>
                    
<div class="stalyListek">
  <h3>STÁLÝ JÍDELNÍ LÍSTEK</h3>
  <p>Rozvoz z technických důvodů není.<br>
     Děkujeme za pochopení.</p>
</div>

Aucun commentaire:

Enregistrer un commentaire