After deleting an h1 element, my toggle switch started malfunctioning. Initially centered within the slider, it is now offset to the top. However, clicking the button corrects its position temporarily. Upon refreshing the page, the offset issue reappears.
What could be causing this problem?
function SlideRight() {
// Checks to see if the slider is to the left of the div
if (document.getElementById("slider").style.float !== "right") {
// If it is we will float the sliderBtn to the right and change the background of the housing to green
document.getElementById("slider").style.float = "right";
document.getElementById("slideHousing").style.backgroundColor = "#00ff00";
// Toggle dark mode on
document.body.style.backgroundColor = "#595959";
document.getElementById("header").style.color = "#e6e6e6";
document.getElementById("press").style.color = "#e6e6e6";
} else {
// If clicked again the btn will move back to the left side and change the color back to original
document.getElementById("slider").style.float = "left";
document.getElementById("slideHousing").style.backgroundColor = "#f2f2f2";
// Toggle dark mode off
document.body.style.backgroundColor = "#e6e6e6";
document.getElementById("header").style.color = "#000";
document.getElementById("press").style.color = "#000";
}
}body {
height: 100%;
margin: 0;
padding: 0;
background-color: #e6e6e6;
}
html {
height: 100%;
}
.main {
display: table;
height: 100%;
width: 100%;
border: 1px solid transparent;
}
.container {
display: table-cell;
vertical-align: middle;
border: 1px solid transparent;
}
.slider {
height: 100px;
width: 200px;
border-radius: 50px;
background-color: #f2f2f2;
margin: 0 auto;
border: none;
box-shadow: inset 0 0 7px #000;
}
.slideBtn {
border: 1px solid transparent;
height: 90px;
margin-top: 4px;
margin-left: 5px;
margin-right: 5px;
width: 90px;
border-radius: 50px;
background-color: silver;
box-shadow: 0 0 5px #000;
}<h1 style="text-align: center;" id="header">Dark Mode</h1>
<div class="main">
<div class="container">
<p style="text-align: center;" id="press">Press button to toggle dark mode.</p>
<div class="slider" id="slideHousing">
<div class="slideBtn" id="slider" onclick="SlideRight()">
</div>
</div>
</div>
</div>