Why does it takes to click to apply my function?

Question

I'm trying to write a code that when you click the button it shows and when pressed again it hides images. I made that images display to none and I want it to change to block when pressed the button (so it shows the images).

It works, but only when you click twice. What should I do to activate it on one click?

HTML :

<button id="categoryBtn" onclick="insta()">instagram users</button>

javascript :

function insta() {
  var a = document.getElementById("instaBalas");

  if (a.style.display == "none") {
    a.style.display = "block";
  } else {
    a.style.display = "none";
  }
}

The `style` object only shows properties that were explicitly set in the original HTML, or changed later by JavaScript. Thus when the function runs the first time, the "display" property will be `undefined`, not "block". — Pointy, Apr 20 '19 at 14:46
Because `#instaBalas` does not have `display:none` initially :/, so it takes two clicks to eventually add block. — Lawrence Cherone, Apr 20 '19 at 14:46

score 2 · Answer 1 · answered Apr 20 '19 at 14:47

Because when you click first time the display is empty string. So its then set to 'none' and works normally after. You can use getComputedStyle

const img = document.getElementById("instaBalas")
function insta() {
  var a = window.getComputedStyle(img);

  if (a.display == "none") {
    img.style.display = "block";
  } else {
    img.style.display = "none";
  }
}

<button id="categoryBtn" onclick="insta()">instagram users</button><br>
<img alt="Imgage" id="instaBalas">

Another way I would suggest to have a class and use classList.toggle()

const img = document.getElementById("instaBalas")
function insta() {
  img.classList.toggle('hidden')
}

.hidden{
  display:none;
}

<button id="categoryBtn" onclick="insta()">instagram users</button><br>
<img alt="Imgage" id="instaBalas">

T.J. Crowder · Answer 2 · 2019-04-20T16:43:36.220

The style object on an element doesn't reflect its current styling, it reflects the styles set directly on it. So e.style.display == "none" is false initially.

If you want to go that route, use getComputedStyle, which returns an object with the "computed"¹ style for the element, taking CSS into account:

function insta() {
  var a = document.getElementById("instaBalas");

  if (getComputedStyle(a).display == "none") {
// ---^^^^^^^^^^^^^^^^^^^
    a.style.display = "block";
  } else {
    a.style.display = "none";
  }
}

function insta() {
  var a = document.getElementById("instaBalas");

  if (getComputedStyle(a).display == "none") {
    a.style.display = "block";
  } else {
    a.style.display = "none";
  }
}

<button id="categoryBtn" onclick="insta()">instagram users</button>
<div id="instaBalas">instaBalas</div>

BUT, it would be better to define a class to hide the element, and then use toggle on the element's classList:

function insta() {
  document.getElementById("instaBalas").classList.toggle("hidden");
}

Live Example:

function insta() {
    document.getElementById("instaBalas").classList.toggle("hidden");
}

.hidden {
  display: none;
}

<button id="categoryBtn" onclick="insta()">instagram users</button>
<div id="instaBalas">instaBalas</div>

All major browsers have classList, and it can be polyfilled for obsolete browsers.

¹ It's not really the computed property value, it's the resolved or used property value, details here.

really thanks for taking the time it worked. is there any possibility to expand the getComputedStyle(a).display? — iammgt, Apr 20 '19 at 16:34
@iammgt - I'm not sure what more to say. :-) I did update the answer after your comment, adding a little bit and linking to MDN's documentation for `getComputedStyle` if that helps...? — T.J. Crowder, Apr 23 '19 at 11:17

Why does it takes to click to apply my function?

2 Answers2