Toggle switch taking two clicks to slide-CodePudding

I am running into an issue while trying to create a toggle button. It moves on click but only after two clicks. I know that I have to set it before it will slide on the first click, but my confusion stems from when I did that, it clicked to the right and wouldn't move back no matter how many times I clicked it. Is there anyone that knows how I can solve this issue?

    <div >
        <div >
            <div  id="slideHousing">
                <div  id="slider" onclick="SlideRight()">

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

.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: 1px solid transparent;
            
        }

        .slideBtn {
            border: 1px solid transparent;
            height: 95px;
            margin: 1px;
            width: 100px;
            border-radius: 50px;
            background-color: silver;
        }

function SlideRight() {
            // Checks to see if the slider is to the left of the div
            if (document.getElementById("slider").style.float === "left"){
                // 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";
            } 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";
            }
        }

CodePudding user response：

When you first check for style.float === 'left', the value is actually undefined as it hasn't been set. Instead, you could simply check if the value is not equal to right style.float !== right.

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";
  } 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";
  }
}

.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: 1px solid transparent;
}

.slideBtn {
  border: 1px solid transparent;
  height: 95px;
  margin: 1px;
  width: 100px;
  border-radius: 50px;
  background-color: silver;
}

<div id="header">

</div>

<div >
  <div >
    <div  id="slideHousing">
      <div  id="slider" onclick="SlideRight()">

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

This is a good start, but there are probably a number of suggestions:

The whole of the slider should clickable
The onclick event could probably be labelled slideToggle or something to the effect
You could probably add a css class that would do everything for you

Such as:

function toggleSlider(ele) {
  ele.classList.toggle('active')
}

.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: 1px solid transparent;
}

.slideBtn {
  border: 1px solid transparent;
  height: 95px;
  margin: 1px;
  width: 100px;
  border-radius: 50px;
  background-color: silver;
}

.slider.active .slideBtn {
  float: right;
}

.slider.active {
  background-color: #00ff00;
}

<div id="header">

</div>

<div >
  <div >
    <div  id="slideHousing" onclick="toggleSlider(this)">
      <div  id="slider">

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

CodePudding user response：

So I added this to your CSS:

  #slider {
          float: left;
        }

So it has something to initial read.

I also simply just reversed the "left" and "right" from all of your js code (since it is now innitially left) and it seems to work:

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 = "left";
                document.getElementById("slideHousing").style.backgroundColor = "#00ff00";

                // Toggle dark mode on
                document.body.style.backgroundColor = "#595959";
                document.getElementById("header").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 = "right";
                document.getElementById("slideHousing").style.backgroundColor = "#f2f2f2";

                // Toggle dark mode off
                document.body.style.backgroundColor = "#e6e6e6";
                document.getElementById("header").style.color = "#000";
            }
        }

.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: 1px solid transparent;
            
        }

        .slideBtn {
            border: 1px solid transparent;
            height: 95px;
            margin: 1px;
            width: 100px;
            border-radius: 50px;
            background-color: silver;
        }
        
        #slider {
          float: left;
        }

 <div >
        <div >
            <div  id="slideHousing">
                <div  id="slider" onclick="SlideRight()">

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