Question 36225 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Hide elements in HTML using script variable – Jquery

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.

Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    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 onload="hideBoth()">
    <center class="success">
      <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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search