The Doctor The Doctor - 14 days ago 5
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.

<head>
<style>
.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);
}
}
</style>
</head>

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

<body onload="myFunction()">

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

<script>
var myVar;
var toooa
function myFunction() {
myVar = setTimeout(showPage, 3000);
}

function showPage() {

document.getElementById("myDiv").style.display = "block"
document.getElementById("loading").style.display = "none"
}
</script>

</body>
</html>


http://codepen.io/anon/pen/QGdYdw?editors=1000#0

Answer

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>
Comments