I'm taking an engineering class and right now we're learning html. I've been instructed to type the following script to switch the display property of the div from none to flex and vice versa. However, for some reason the script makes the div not exist at all.

function toggle() {
  var x = document.getElementById("myDIV");
  if (x.style.display === "flex") {
    x.style.display = "none";
  } else {
    x.style.display = "flex";
  }
}

.btn {
  background: none;
  opacity: 1;
  border-radius: 10px;
  border: 2px solid white;
  cursor: pointer;
  color: white;
  font-family: Helvetica;
  font-size: 1em;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 5px 10px 5px 10px;
}

.alignV {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  align-items: center;
  justify-content: center;
}

.btn-space {
  background: none;
  opacity: 0;
  width: 50px;
}

.btn:hover,
.btn:focus {
  background-color: yellow;
  color: black;
}

#myDIV {
  /*where the display property is*/
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  text-align: center;
  align-items: center;
  justify-content: center;
  padding: 1%;
  /*background-color: lightblue;*/
  visibility: hidden;
  flex-direction: row;
  font-family: Helvetica;
  display: none;
}

.myDIVbox {
  position: relative;
  left: 0;
  /*border: 2px solid red;*/
  width: 60%;
  height: 50%;
  padding-bottom: 30px;
  padding-top: 30px;
  display: inline-flex;
  flex-direction: row;
  font-family: Helvetica;
  color: white;
  background: black;
  opacity: 60%;
  padding-left: 30px;
  padding-right: 30px;
}

<div >

  <button >button 1</button>
  <button ></button>
  <button >button 2</button>
  <button ></button>
  <button  onclick="toggle()">Button 3</button>
  <!-- the button -->

</div>
<div id="myDIV">
  <!--the div that has the display property being changed-->
  <div >
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Accumsan in nisl nisi scelerisque. Facilisis sed odio morbi quis commodo odio. Urna molestie at elementum eu facilisis. Sem fringilla
    ut morbi tincidunt. Donec et odio pellentesque diam volutpat. Habitant morbi tristique senectus et netus. Turpis cursus in hac habitasse platea dictumst quisque sagittis.<br>
    <br> Dictumst quisque sagittis purus sit amet volutpat. Pulvinar neque laoreet suspendisse interdum consectetur. Eu augue ut lectus arcu bibendum at varius. Nibh tortor id aliquet lectus proin. Duis at consectetur lorem donec. Porttitor leo a diam
    sollicitudin. Aliquam nulla facilisi cras fermentum odio eu. Mi tempus imperdiet nulla malesuada. Molestie ac feugiat sed lectus vestibulum mattis. Elementum curabitur vitae nunc sed velit. Egestas integer eget aliquet nibh. Lacinia quis vel eros
    donec.<br>
    <br> Ultrices dui sapien eget mi. Dolor sit amet consectetur adipiscing elit pellentesque habitant morbi tristique. Risus at ultrices mi tempus imperdiet nulla malesuada pellentesque. Non tellus orci ac auctor augue mauris. Ornare massa eget egestas
    purus viverra accumsan in nisl nisi. Ut enim blandit volutpat maecenas volutpat.<br>
    <button >Lorem Ipsum</button>
  </div>
</div>

What's supposed to happen is a bar is drawn at the top of the page with three buttons, and clicking the third makes the div appear by changing the display property from none to flex, however what actually happens is that the bar is draw with the buttons but the button doesn't make the div appear. I've tried changing the display on the div to flex myself in the css so it should start visible, but it still doesn't appear. I've also tried asking my teacher, who was of little help. I unfortunately can't use developer tools in my browser to check what's actually going on since it's disabled on the school computers.

CodePudding user response：

The problem is visibility: hidden; on #myDIV. Even when you set the display property to something other than none, visibility: hidden; is still preventing it from appearing.