Issue with Toggle Switch Not Resetting on Page Reload
I am encountering a problem with a toggle switch I implemented from the W3schools example (link here). Unlike in the W3schools editor where it resets its state upon reload, my toggle switch remains in its last position even after a page reload. It is crucial for my project that the toggle switch resets to an unchecked state whenever the page is loaded or reloaded.
I initially thought the issue might be related to caching since I am working locally on my computer (using Wordpad for HTML editing and viewing through Firefox), but when I uploaded the files to neocities, the problem persisted. This leads me to believe that the issue lies within the code itself.
<head>
<style>
.selector {
background-color:rgba(255, 255, 0, 0.3);
text-align:center;
border:1px solid gold;
width: 50vw;
max-width:500px;
border-radius:2em;
padding:1em;
font-size:20px;
color:gold;
margin:2em auto auto;
}
.switch {
position: relative;
display: inline-block;
width: 50px;
height: 24px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: darkblue;
-webkit-transition: .4s;
transition: .4s;
border-radius: 34px;
}
.slider:before {
position: absolute;
content: "";
height: 16px;
width: 16px;
left: 4px;
bottom: 4px;
background-color: gold;
-webkit-transition: .4s;
transition: .4s;
border-radius: 50%;
}
input:checked + .slider {
background-color: cornflowerblue;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
</style>
</head>
<body>
<div class="selector">Unchecked
<label class="switch">
<input type="checkbox" onclick="hoverFunction()">
<span class="slider" alt="toggle switch button"></span>
</label>
Checked</div>
</body>
What steps should I take to resolve this persistent issue?