Problems show/hiding DIV content depending on whether a variable is NULL

Question

Right now, I have to create printable documents. Now that I've got the formatting done, my client comes and says that if there are two Trustee names, he needs multiple Trustee signatures. This means I need to generate a second Signature page with the correct name on it. So I check the SecondTrustee variable and am trying to get the second page to show. Otherwise, just show one page.

Can someone show me what I'm doing wrong?

#trustee {
  width: 100%;
  padding: 50px 0;
  text-align: center;
  background-color: lightblue;
  margin-top: 20px;
}

<body>
  <script type="text/javascript">
    var second = "asdf";

    function checkSigs() {
      var x = document.getElementById("trustee");
      if (second === "") {
        x.style.display = "block";
      } else {
        x.style.display = "none";
      }
    }
    document.onload = checkSigs()
  </script>

  <p>First Trustee Page</p>

  <div id="trustee">
    <p>This is my Second Trustee Page.</p>
  </div>

</body>

You are setting second to "asdf" and never changing it. So of course x will always have a display of none — ControlAltDel, Sep 09 '22 at 18:50
Did you see the error in the console? The big clue there is that the element wasn't found. — isherwood, Sep 09 '22 at 19:01

score 0 · Answer 1 · answered Sep 09 '22 at 18:56

0

Your javascript code is running before the div element is available so variable x is null. You need to move your script to the end of the html body.

answered Sep 09 '22 at 18:56

teej

135
3
11

Thank you all. That was it! I just learned I have to run my javascript at the end! – user3641024 Sep 10 '22 at 03:09

score 0 · Answer 2 · answered Sep 09 '22 at 18:58

You need to use window load not document load, or add your script at the end of the body.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#trustee {
  width: 100%;
  padding: 50px 0;
  text-align: center;
  background-color: lightblue;
  margin-top: 20px;
}
</style>
</head>
<body>

  <script type="text/javascript">
    var second = "asdf";

    function checkSigs() {
      var x = document.getElementById("trustee");
      if (second === "") {
        x.style.display = "block";
      } else {
        x.style.display = "none";
      }
    }
    window.addEventListener('load', checkSigs)
  </script>
<p>First Trustee Page</p>

<div id="trustee">
  <p>This is my Second Trustee Page.</p>
</div>

</body>
</html>

Problems show/hiding DIV content depending on whether a variable is NULL

2 Answers2