Toggle switch malfunctioning after deletion of an h1

November 12, 2022

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

>Solution :

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