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>