Display value shoe false in console

Question

i have a div and button i click the button fist time no response and click again and show

function banne() {
  var ban = document.getElementById("content");
  //consloe.log(ban.style.display === "none");
  if (ban.style.display === "none") {
    ban.style.display = "block";
  } else {
    ban.style.display = "none";
  }
}

.banner-content {
  display: none;
  height: 100px;
  color: #fff;
  background: #1b1b1b;
}

<button class="banner" onclick="banne()"> know </button>
<div class="banner-content" id="content">
  Some Data
</div>

here the console value show false value but i write the style inline style="display:none" in div class banner-content it working, why the style sheet value not taken ,any idea?

See the answer of: https://stackoverflow.com/questions/9444751/why-javascript-this-styleproperty-return-an-empty-string — Chloe Dev, Jul 26 '20 at 16:49
Unable to answer. I will write a function here. Here's what you need - - - - - function banne(){ var ban = document.getElementById("content"); if (window.getComputedStyle) { var spStyle = getComputedStyle(ban, ''); } else { var spStyle = ban.currentStyle; } if (ban.style.display === "none") { ban.style.display = "block"; } else { ban.style.display = "none"; } console.log(spStyle.display); } — s.kuznetsov, Jul 26 '20 at 17:27

score 2 · Answer 1 · answered Jul 26 '20 at 16:49

Javascript can't access the style mentioned in the CSS file with the ban.style.display. You have to use getComputedStyle() method.

window.getComputedStyle(ban, null).getPropertyValue("display");

But in your case I think it is better use a class based toggle maybe like,

CSS

.banner-content {
  display: none;
  height: 100px;
  color: #fff;
  background: #1b1b1b;
}
.banner-content.active {
  display: block;
}

JS


function banne() {
  var ban = document.getElementById("content");
  ban.classList.toggle("active");
}

No, as the visibility is based on classes we can toggle the class using javascript and make it hidden/visible. No need to access the display value, atleast in this case. — boredfromboredom, Jul 26 '20 at 16:53

score 0 · Answer 2 · answered Jul 26 '20 at 16:53

While style doesn't register the stylesheet properties, you can check if the style does not equal to "block" and then set it to block, otherwise none. Also see the difference between getComputedStyle and style: https://developer.mozilla.org/en/DOM/window.getComputedStyle

function banne() {
  var ban = document.getElementById("content");
  //consloe.log(ban.style.display === "none");
  if (ban.style.display !== "block") {
    ban.style.display = "block";
  } else {
    ban.style.display = "none";
  }
}

.banner-content {
  display: none;
  height: 100px;
  color: #fff;
  background: #1b1b1b;
}

<button class="banner" onclick="banne()"> know </button>
<div class="banner-content" id="content">
  Some Data
</div>

score 0 · Answer 3 · answered Jul 26 '20 at 16:56

It's generally not a good idea to use inline event handlers.

Add a listener to the document. To toggle display, use a separate css class (.visible in the snippet) and toggle that. It makes your life so much easier.

document.addEventListener("click", banne);

function banne(evt) {
  if (evt.target.classList.contains("banner")) {
    document.querySelector("#content").classList.toggle("visible");
  }
}

.banner-content {
  display: none;
  height: 100px;
  color: #fff;
  background: #1b1b1b;
}

.banner-content.visible {
  display: block;
}

<button class="banner"> know </button>
<div class="banner-content" id="content">
  Some Data
</div>

Display value shoe false in console

3 Answers3