Toggle switch taking two clicks to slide

Question

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 class="main">
        <div class="container">
            <div class="slider" id="slideHousing">
                <div class="slideBtn" 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";
            }
        }

Instead of using JS and DIV elements... use what already is provided. See: [customize checkbox button](https://stackoverflow.com/a/17541916/383904) — Roko C. Buljan, Nov 10 '22 at 19:59

dangarfield · Accepted Answer · 2022-11-10T19:56:24.643

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 class="main">
  <div class="container">
    <div class="slider" id="slideHousing">
      <div class="slideBtn" 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 class="main">
  <div class="container">
    <div class="slider" id="slideHousing" onclick="toggleSlider(this)">
      <div class="slideBtn" id="slider">

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

That worked thank you! I was pulling hair out and wasn't realizing it was such a simple fix. — mjlynch, Nov 10 '22 at 19:52

score 0 · Answer 2 · answered Nov 10 '22 at 19:48

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 class="main">
        <div class="container">
            <div class="slider" id="slideHousing">
                <div class="slideBtn" id="slider" onclick="SlideRight()">

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

Toggle switch taking two clicks to slide

2 Answers2