javascript - Hide and Show Div tag in HTML - Stack Overflow|江阴雨辰互联

Here I am trying to hide the block of but for first time I need to double Click the button every time the page is refreshed. I have attached my code below for reference.

<!DOCTYPE html>
<html>

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

<body>

  <p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p>
  <button onclick="myFunction()">Try it</button>
  <div id="myDIV">
    This is my DIV element.
  </div>

  <p><b>Note:</b> The element will not take up any space when the display property set to "none".</p>
  <script>
    function myFunction() {
      var x = document.getElementById("myDIV");
      if (x.style.display == "none") {
        x.style.display = "block";
      } else {
        x.style.display = "none";
      }
    }
  </script>
</body>

</html>

Why is that and can someone let me know where I am making mistake ?

Here I am trying to hide the block of but for first time I need to double Click the button every time the page is refreshed. I have attached my code below for reference.

<!DOCTYPE html>
<html>

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

<body>

  <p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p>
  <button onclick="myFunction()">Try it</button>
  <div id="myDIV">
    This is my DIV element.
  </div>

  <p><b>Note:</b> The element will not take up any space when the display property set to "none".</p>
  <script>
    function myFunction() {
      var x = document.getElementById("myDIV");
      if (x.style.display == "none") {
        x.style.display = "block";
      } else {
        x.style.display = "none";
      }
    }
  </script>
</body>

</html>

Why is that and can someone let me know where I am making mistake ?

Share Improve this question edited Jan 3, 2022 at 8:57 Joshua 3,2063 gold badges26 silver badges41 bronze badges asked Jan 3, 2022 at 7:29 ParikshitRathode 614 bronze badges

1 Why not just use <details><summary>? That way you don't need any JS at all. – Dai Commented Jan 3, 2022 at 7:31

Add a ment |

5 Answers 5

Sorted by: Reset to default 3

As explained by this answer on SO, only the inline style, or the style applied to the element as an attribute to the element such as <div style="diplay:none;"></div> will show up when you access element.style. You need to access putedStyle to get the style applied on the element from anywhere in the document.

To get the putedStyle of an element, you can use:

window.getComputedStyle(element).display

So, your JS code is supposed to look like:

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

Try it right here:

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

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

<p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p>

<button onclick="myFunction()">Try it</button>

<div id="myDIV">
This is my DIV element.
</div>

<p><b>Note:</b> The element will not take up any space when the display property set to "none".</p>

The problem is that initially style.display is not set to anything (the inline style has not been set).

So instead of testing for 'none' test for NOT 'block'. That way the test will be achieved even on the first time through.

<!DOCTYPE html>
<html>

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

<body>

  <p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p>

  <button onclick="myFunction()">Try it</button>

  <div id="myDIV">
    This is my DIV element.
  </div>

  <p><b>Note:</b> The element will not take up any space when the display property set to "none".</p>

  <script>
    function myFunction() {
      var x = document.getElementById("myDIV");
      if (x.style.display != "block") {
        x.style.display = "block";
      } else {
        x.style.display = "none";
      }
    }
  </script>

</body>

</html>

At the first click, the div element is not found on the page as the CSS makes it display: none. So the first if block is not being carried out. It sets the element display as none at first click and on second click it changes the value to block.

So, we need to check if the display attribute value is none or "" at first click.

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

<p>Click the "Try it" button to toggle between hiding and showing the DIV
    element:</p>

<button onclick="myFunction()">Try it</button>

<div id="myDIV">
    This is my DIV element.
</div>

<p><b>Note:</b> The element will not take up any space when the display
    property set to "none".</p>

<script>
    function myFunction() {
        var x = document.getElementById("myDIV");
        
        if (x.style.display === "none" || x.style.display === "") {
            x.style.display = "block";
        } else {
            x.style.display = "none";
        }
    }
</script>

</body>
</html>

Pretty similar to @arsho's answer, you can define it's inline CSS as display:none first.

<!DOCTYPE html>
<html>

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

<body>
  <p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p>

  <button onclick="myFunction()">Try it</button>

  <div id="myDIV" style="display: none;">This is my DIV element.</div>

  <p><b>Note:</b> The element will not take up any space when the display property set to "none".</p>

  <script>
    function myFunction() {
      var x = document.getElementById("myDIV");
      if (x.style.display == "none") {
        x.style.display = "block";
      } else {
        x.style.display = "none";
      }
    }
  </script>
</body>

</html>

An elegant approach would be to simply use the toggle function. You need only to add a hide class which you can toggling.

    function myFunction() {
      var x = document.getElementById("myDIV");
      x.classList.toggle('hide');      
    }

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

.hide {
  display: none;
}

    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>

    </style>
    </head>
    <body>
    
    <p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p>
    
    <button onclick="myFunction()">Try it</button>
    
    <div id="myDIV" class="hide">
    This is my DIV element.
    </div>
    
    <p><b>Note:</b> The element will not take up any space when the display property set to "none".</p>
    
    <script>

    </script>
    
    </body>
    </html>

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745101750a4611314.html

javascript - Hide and Show Div tag in HTML - Stack Overflow

5 Answers 5

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - Hide and Show Div tag in HTML - Stack Overflow

5 Answers 5

相关推荐