0

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>
Martin Kopečný
  • 23
  • 4
  • _"I don´t know if i have mistake in if condition"_ - Then why the question if there's no problem/error? – Andreas Jul 12 '21 at 10:52
  • [How do I ask a good question?](https://stackoverflow.com/help/how-to-ask): _"Describe the problem. "It doesn't work" isn't descriptive enough to help people understand your problem. Instead, tell other readers what the expected behavior should be. Tell other readers what the exact wording of the error message is, and which line of code is producing it. Use a brief but descriptive summary of your problem as the title of your question."_ – Andreas Jul 12 '21 at 10:53
  • [Duplicate](//google.com/search?q=site%3Astackoverflow.com+js+style+property+is+blank+if+set+in+css) of [Why element.style always return empty in JS?](/q/50645188/4642212). Checking CSS properties directly is [best avoided](/q/55071684/4642212). Instead, a CSS class should be used and checked with [`.classList.has("cls")`](//developer.mozilla.org/docs/Web/API/Element/classList), toggled with `.classList.toggle("cls", condition)`, etc. Consider using the [`hidden` attribute](//developer.mozilla.org/docs/Web/HTML/Global_attributes/hidden) instead. – Sebastian Simon Jul 12 '21 at 10:57

1 Answers1

0

When you use event listeners, if statements should be inside the function.

Using addEventListener() is a way to add a function every time the event is called. Here, you add the "click" event to your element when display !== "none", so it verifies the display at the initialization only.

Here is how to do your first statement:

p_m.addEventListener("click", function() {
    if (poledniMenu.style.display !== "block") {
        poledniMenu.style.display = "block";
        stalyListek.style.display = "none";
    } else {
        p_m.classList.add("pm_sl_active");
    }
});

I also inverted your if statement: a displayed element doesn't always have the block value.

Ivaalo
  • 72
  • 2
  • 9
  • Thank you, but i have another problem :( . I want to automatically add classlist "pm_sl_active" when display is block and then when display is none remove that class. i tried to do if (poledniMenu.style.display === "block") { p_m.classList.add("pm_sl_active"); } but it does not work :-/ – Martin Kopečný Jul 12 '21 at 15:12
  • Okay i solve it by myself :) that was easy :) thank you so much :) – Martin Kopečný Jul 12 '21 at 15:20