I'm not sure why my localstorage isn't working. When the page loads, it loads up the function stored(), which should be the stored value for my toggle function, which changes the page from light to dark.
HTML:
<body onload="stored()">
<label for="ID_HERE" class="toggle-switchy" >
<input checked type="checkbox" name="server" id="ID_HERE">
<span class="toggle" onclick="toggle()" id="saveDarkLight"></span>
<span class="switch"></span>
</span>
</label>
(Removed old javascript file as it did not let me post too much code)
Updated HTML:
<label for="ID_HERE" class="toggle-switchy" >
<input checked onclick="toggle()" type="checkbox" name="server" id="ID_HERE">
<span class="toggle" id="saveDarkLight"></span>
<span class="switch"></span>
</span>
</label>
Updated JS:
function stored() {
var storedValue = localStorage.getItem("server");
if(storedValue){
lightmode()
document.getElementById("ID_HERE").checked = true;
}else{
darkmode()
document.getElementById("ID_HERE").checked = false;
}
}
function toggle() {
if(document.getElementById("ID_HERE").checked) {
lightmode()
var input = document.getElementById("ID_HERE");
localStorage.setItem("server", input.checked);
}
else {
darkmode()
var input = document.getElementById("ID_HERE");
localStorage.setItem("server", input.checked);
}
}
It is input.value and not input.val() in vanilla JavaScript. And your onclick should be on the input. I would do it like so :
function stored() {
var storedValue = localStorage.getItem("server");
if(sotoredValue){
lightmode()
document.getElementById("ID_HERE").checked = true;
}else{
darkmode()
document.getElementById("ID_HERE").checked = false;
}
}
function toggle() {
if(document.getElementById("ID_HERE").checked) {
lightmode()
var input = document.getElementById("ID_HERE");
localStorage.setItem("server", input.checked);
}
else {
darkmode()
var input = document.getElementById("ID_HERE");
localStorage.setItem("server", input.checked);
}
}
function darkmode() {
const bodyChanges = document.querySelectorAll('.margin_body');
for (let i = 0; i < bodyChanges.length; i++) {
bodyChanges[i].style.background = '#0c0a0f';
}
}
function lightmode() {
const bodyChanges = document.querySelectorAll('.margin_body');
for (let i = 0; i < bodyChanges.length; i++) {
bodyChanges[i].style.background = 'white';
}
}
<body onload="stored()">
<label for="ID_HERE" class="toggle-switchy" >
<input checked onclick="toggle()" name="server" id="ID_HERE">
</label>
</body>