I have a toggle switch and everything was working perfectly, but as soon as I deleted and h1 element my switch started acting up. Orginally it would sit perfectly in the center of the slider, but now it is offset and stuck to the top. Once the button is clicked it returns to the position its suppose to be in. As soon as the page is refreshed it goes right back to being offset.

What am I doing wrong?

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 >
    <div >
        <p style="text-align: center;" id="press">Press button to toggle dark mode.</p>
        <div  id="slideHousing">
            <div  id="slider" onclick="SlideRight()">

            </div>
        </div>
    </div>
</div>

CodePudding user response：

You just need to set the initial value of float for the button.

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 {
  float:left;
  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 >
    <div >
        <p style="text-align: center;" id="press">Press button to toggle dark mode.</p>
        <div  id="slideHousing">
            <div  id="slider" onclick="SlideRight()">

            </div>
        </div>
    </div>
</div>