Sliding toggle switch requiring two clicks

Question

Sliding toggle switch requiring two clicks

I'm encountering a problem with a toggle button I'm trying to create. It only moves after two clicks, even though I know I need to set it before sliding on the first click. However, when I tried that, it clicked to the right and wouldn't move back no matter how many times I clicked it. Can anyone help me 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";
            }
        }

javascript html css

Answer 1

Answer №1

When initially checking for style.float === 'left', the result is undefined since it hasn't been assigned a value yet. Instead, consider checking if the value is not equal to 'right' using style.float !== right.

function SlideRight() {

  // Verify if the slider is positioned to the left of the div
  if (document.getElementById("slider").style.float !== "right") {
    // Move the sliderBtn to the right and change background color to green
    document.getElementById("slider").style.float = "right";
    document.getElementById("slideHousing").style.backgroundColor = "#00ff00";

    // Enable dark mode
    document.body.style.backgroundColor = "#595959";
    document.getElementById("header").style.color = "#e6e6e6";
  } else {
    // Toggle the btn back to the left side and revert color changes
    document.getElementById("slider").style.float = "left";
    document.getElementById("slideHousing").style.backgroundColor = "#f2f2f2";

    // Disable dark mode
    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>

Although this is a good start, there are several suggestions that can be implemented:

The entire slider should be clickable
Rename the onclick event to something like slideToggle
Create a CSS class that automates the process

For example:

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>

Answer 2

When initially checking for style.float === 'left', the result is undefined since it hasn't been assigned a value yet. Instead, consider checking if the value is not equal to 'right' using style.float !== right.

function SlideRight() {

  // Verify if the slider is positioned to the left of the div
  if (document.getElementById("slider").style.float !== "right") {
    // Move the sliderBtn to the right and change background color to green
    document.getElementById("slider").style.float = "right";
    document.getElementById("slideHousing").style.backgroundColor = "#00ff00";

    // Enable dark mode
    document.body.style.backgroundColor = "#595959";
    document.getElementById("header").style.color = "#e6e6e6";
  } else {
    // Toggle the btn back to the left side and revert color changes
    document.getElementById("slider").style.float = "left";
    document.getElementById("slideHousing").style.backgroundColor = "#f2f2f2";

    // Disable dark mode
    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>

Although this is a good start, there are several suggestions that can be implemented:

The entire slider should be clickable
Rename the onclick event to something like slideToggle
Create a CSS class that automates the process

For example:

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>

Answer 3

Answer №2

After adding this to your CSS:

  #slider {
          float: left;
        }

I made a slight adjustment by swapping the positions of "left" and "right" in all of your JavaScript code (since it is now initially set to left) and it appears to be functioning correctly:

function SlideRight() {
            // Checks if the slider is positioned to the right of the div
            if (document.getElementById("slider").style.float === "right"){
                // If so, move the sliderBtn to the right and change the background color of the housing to green
                document.getElementById("slider").style.float = "left";
                document.getElementById("slideHousing").style.backgroundColor = "#00ff00";

                // Activate dark mode
                document.body.style.backgroundColor = "#595959";
                document.getElementById("header").style.color = "#e6e6e6";
            } else {
                // If clicked again, move the button back to the left side and revert the color to its original state
                document.getElementById("slider").style.float = "right";
                document.getElementById("slideHousing").style.backgroundColor = "#f2f2f2";

                // Deactivate dark mode
                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>

Answer 4

After adding this to your CSS:

  #slider {
          float: left;
        }

I made a slight adjustment by swapping the positions of "left" and "right" in all of your JavaScript code (since it is now initially set to left) and it appears to be functioning correctly:

function SlideRight() {
            // Checks if the slider is positioned to the right of the div
            if (document.getElementById("slider").style.float === "right"){
                // If so, move the sliderBtn to the right and change the background color of the housing to green
                document.getElementById("slider").style.float = "left";
                document.getElementById("slideHousing").style.backgroundColor = "#00ff00";

                // Activate dark mode
                document.body.style.backgroundColor = "#595959";
                document.getElementById("header").style.color = "#e6e6e6";
            } else {
                // If clicked again, move the button back to the left side and revert the color to its original state
                document.getElementById("slider").style.float = "right";
                document.getElementById("slideHousing").style.backgroundColor = "#f2f2f2";

                // Deactivate dark mode
                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>

Sliding toggle switch requiring two clicks

Answer №1

Answer №2

Similar questions

The hyperlink is unresponsive and cannot be activated with a click

Steps to trigger a dialog to appear automatically within an Icon Menu with React Material UI

JavaScript: Troubleshooting Array Formatting

Creating an AJAX request in Knockout.js

Navbar Dropdown Button in Bootstrap Not Functioning Properly

retrieve the classname by tapping into the parsed JSON

Vuetify: how to disable the color transition for v-icon

Debugging issue with Mongoose find search in ExpressJS with an if statement

My component is not executing the onClick function as expected

Not successfully integrating an angular component

Assign a value to a dropdownlist in Javascript

Place the image over another section, shifting the content aside

Prevent removal in jQuery Sortable by confirming first

Using Three.js with an HTML slider

Create a JavaScript function that checks for the existence of a file and returns a

Stationary element against backdrop

Steps to manage the time delay between mousewheel events triggering

Using NodeJS: Transmitting parameters and the current object to event handlers

Getting some clarity on how to structure a project using Node.js, Express.js, and React.js

Upon loading, the IntersectionObserver immediately declares the isIntersecting property true for all elements