Hide elements in HTML using script variable-CodePudding

I have a use case where I am loading the HTML page from the variable.

now I have 3 states to maintain (PENDING, COMPLETED, FAILED)

on each state, I want to show different messages and elements

<script>
      var status = "COMPLETED";

      function hideBoth() {
        document.getElementById("cont1").style.visibility = "hidden";
        document.getElementById("cont2").style.visibility = "hidden";
        console.log(status, "-=--Status");
        if (status === "COMPLETED") {
          console.log(status, "INSIDE COMPLETED");
          console.log(
            document.getElementById("COMPLETED"),
            "INSIDE COMPLETED CHECK"
          );
          document.getElementById(status).innerHTML;
          document.getElementById("PENDING").style.visibility = "hidden";
          document.getElementById("FAILED").style.visibility = "hidden";
        }

        if (status === "PENDING") {
          document.getElementById("COMPLETED").style.visibility = "hidden";
          document.getElementById("PENDING").innerHTML = status;
          document.getElementById("FAILED").style.visibility = "hidden";
        } else {
          document.getElementById("COMPLETED").style.visibility = "hidden";
          document.getElementById("PENDING").innerHTML = status;
          document.getElementById("FAILED").style.visibility = "hidden";
        }
      }
    </script>

This is the script tag looks like

the entire code is here https://codesandbox.io/s/elated-lamport-fwhqsm?file=/index.html

Where I am missing things, Not so sure about it. Can I get some pointers on what I am missing?

Thanks in advance.

CodePudding user response：

It has two issues:

The elements cont1 and cont2 are not in the HTML, it fails there and stops the execution
The else clause is executed when status === 'completed' then it hides the "completed" block. I should be part of the initial if.

I forked your code and fixed it here: https://codesandbox.io/s/elated-breeze-gmh5c4?file=/index.html

CodePudding user response：

Consider the following.

var status = "COMPLETED";

function hideBoth() {
  //document.getElementById("cont1").style.visibility = "hidden";
  //document.getElementById("cont2").style.visibility = "hidden";
  console.log(status, "-=--Status");
  if (status === "COMPLETED") {
    console.log(status, "INSIDE COMPLETED");
    console.log(
      document.getElementById("COMPLETED"),
      "INSIDE COMPLETED CHECK"
    );
    document.getElementById(status).innerHTML;
    document.getElementById("PENDING").style.visibility = "hidden";
    document.getElementById("FAILED").style.visibility = "hidden";
  } else if (status === "PENDING") {
    document.getElementById("COMPLETED").style.visibility = "hidden";
    document.getElementById("PENDING").innerHTML = status;
    document.getElementById("FAILED").style.visibility = "hidden";
  } else {
    document.getElementById("COMPLETED").style.visibility = "hidden";
    document.getElementById("FAILED").innerHTML = status;
    document.getElementById("PENDING").style.visibility = "hidden";
  }
}

Plus the following HTML Changes.

  <body onl oad="hideBoth()">
    <center >
      <div id="FAILED">
        <lottie-player
          src="https://assets9.lottiefiles.com/packages/lf20_imrP4H.json"
          id="FAILED-player"
          background="transparent"
          speed="1"
          style="width: 200px; height: 200px;"
          loop
          autoplay
        ></lottie-player>
      </div>
      <div id="COMPLETED">
        <lottie-player
          src="https://assets5.lottiefiles.com/packages/lf20_x4fnw3zb.json"
          background="transparent"
          speed="1"
          id="COMPLETED-player"
          style="width: 200px; height: 200px;"
          loop
          autoplay
        ></lottie-player>
      </div>
      <div id="PENDING">
        <lottie-player
          src="https://assets2.lottiefiles.com/packages/lf20_usmfx6bp.json"
          id="PENDING-player"
          background="transparent"
          speed="1"
          style="width: 200px; height: 200px;"
          loop
          autoplay
        ></lottie-player>
      </div>
    </center>
  </body>

You can see that now your JavaScript targets one specific HTML Element. Also updating to an if/else if/else statement will ensure that one one of the three states is visible.