The Doctor The Doctor - 1 year ago 94
CSS Question

Setting div to none removes other elements

When I run this bit of code;

document.getElementById("loading").style.display = "none"

It also removes the div called "myDiv"

When I set MyDiv to block, the text shows up, but when I set loading to none, it removes MyDiv as well, I want it to just hide the display div.

.loading {
position: absolute;
left: 50%;
top: 50%;
margin: -60px 0 0 -60px;
background: #fff;
width: 100px;
height: 100px;
border-radius: 100%;
border: 10px solid #19bee1;
.loading:after {
content: '';
background: trasparent;
width: 140%;
height: 140%;
position: absolute;
border-radius: 100%;
top: -20%;
left: -20%;
opacity: 0.7;
box-shadow: rgba(0, 163, 204, 0.6) -4px -5px 3px -3px;
animation: rotate 2s infinite linear;
@keyframes rotate {
0% {
transform: rotateZ(0deg);
100% {
transform: rotateZ(360deg);

<div class="loading" id="loading"</div>

<body onload="myFunction()">

<div class="myDiv" id="myDiv" style="display:none;" >
<p>Some text in my newly loaded page..</p>

var myVar;
var toooa
function myFunction() {
myVar = setTimeout(showPage, 3000);

function showPage() {

document.getElementById("myDiv").style.display = "block"
document.getElementById("loading").style.display = "none"


Answer Source

Theres an error with your code, i'm surprised it even works:

<div class="loading" id="loading"</div>

Should be:

<div class="loading" id="loading"></div>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download