Q:

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');
  }
});

A:

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";
  }
}

