I'm currently working on a login page for a website and I've added a toggle button as a label for a checkbox. However, I'm struggling to toggle the active/inactive state of the class using JavaScript click EventListeners. Any suggestions or guidance would be greatly appreciated.
let switcher = document.getElementsByClassName('switch')[0];
switcher.addEventListener('click', () => {
switcher.toggle = 'active';
})input[type="checkbox"] {
width: 0px;
height: 0px;
opacity: 0;
}
.switch {
display: inline-block;
padding: 4px;
height: 22px;
width: 60px;
background-color: rgb(110,116,143);
border-radius: 20px;
}
.slider{
display: inline-block;
border-radius: 20px;
background-color: rgb(255,255,255);
width: 22px;
height: 22px;
}
.switch.active {
background-color: rgb(16,89,255);
}
.switch.active > .slider{
margin-left: 38px;
}
.remember {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
width: 80%;
margin: 0px auto;
font-weight: 500;
}
label[for="remember"]:last-of-type > span {
font-size: 14px;
position: relative;
bottom: 5px;
}<div class="remember">
<label class="switch" for="remember">
<span class="slider"></span>
</label>
<input type="checkbox" name="remember" id="remember">
<label for="remember"><span>KEEP ME SIGNED IN</span></label>
</div>