CODEWITHSUNDEEP
javascript
doug williams
doug williams

Reputation: 3

Show/hide script not working on first click but working thereafter

I’m trying to get the “window” div to show/hide with the click of the button in the “line-1” div using this script I pulled from the internet. Nothing happens on the first click but it works fine after that. Any help to get it to work on the first click would be much appreciated. Thanks, Doug

    <div class="line line-1">
        <button class="button button-1" onclick="myFunction()">
            one
        </button>
    </div>

<div id="window">     
    <button class="window-button-1" onclick="myFunction()">
        X
    </button>
</div>

#window {
  height: 500px;
  width: 500px;
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

function myFunction() {
    var x = document.getElementById("window");
    if (x.style.display === "none") {
      x.style.display = "block";
    } else {
      x.style.display = "none";
    }
}

document.body.addEventListener('keyup', function(e) {
  if (e.which === 9) /* tab */ {
    document.documentElement.classList.remove('no-focus-outline');
  }
});

Upvotes: 0

Views: 890

Answers (2)

Cuong Le Ngoc
Cuong Le Ngoc

Reputation: 11975

Refer to the docs:

The style property is used to get as well as set the inline style of an element.

The display style of your #window is first set from css so x.style.display will not return none at the first click. To make it work, you can use Window.getComputedStyle() instead.

function myFunction() {
    var x = document.getElementById("window");
    console.log("x.style.display: " + x.style.display);
    console.log("window.getComputedStyle(x).display: " + window.getComputedStyle(x).display);
    if (window.getComputedStyle(x).display === "none") {
      x.style.display = "block";
    } else {
      x.style.display = "none";
    }
}
#window {
  display: none;
}
<div class="line line-1">
    <button class="button button-1" onclick="myFunction()">
        one
    </button>
</div>

<div id="window">     
    <button class="window-button-1" onclick="myFunction()">
        X
    </button>
</div>

Upvotes: 0

user10987633
user10987633

Reputation:

The reason this is not working is because the initial style x.style.display is empty, I believe because x.style.display checks only for values that have been set programmatically.

Try allowing for that in your check:

function myFunction() {
    var x = document.getElementById("window");
    if (x.style.display !== "block") {
      x.style.display = "block";
    } else {
      x.style.display = "none";
    }
}

To verify what I am saying, and learn a bit I guess(!), you could always do something like this in your function:

function myFunction() {
  var x = document.getElementById("window");
  console.log(`entering myFunction. x.style.display is [${x.style.display}]`); 
  if (x.style.display !== "block") {
     x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

Upvotes: 2

Related Questions