Toggle switch taking two clicks to slide

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

Via Active questions tagged javascript - Stack Overflow https://ift.tt/eWqzl3f