I've been working at this code for hours and keep running into a variety of issues, so the number of times I have edited and tried different ways of coding this is a lot. Basically, I am trying to create a 3 (or more) color theme toggler using radio buttons. It's supposed to add a class, based on which one has been selected, to the body tag so that I can use css and variables to change the styling.
I've gotten it to actually add the class to the body tag, but when reloading, it won't keep the class. I keep reading about localStorage, so I've tried adding that, but I've never used it before, so I don't know if the several ways I have tried are just... wrong or if they just don't work with what I'm trying to do.
I can only use JavaScript and/or JQuery. Here is what I currently have.
<input name="theme" type="radio" aria-label="Light" id="light" value="light">
<label for="light">Light</label>
<input name="theme" type="radio" aria-label="Medium" id="medium" value="medium">
<label for="medium">Medium</label>
<input name="theme" type="radio" aria-label="Dark" id="dark" value="dark">
<label for="dark">Dark</label>
jQuery(window).on("load", function() {
$("#light").click(function(){
$("body").removeClass("medium");
$("body").removeClass("dark");
$("body").addClass("light");
localStorage.ClassName = "light";
});
$("#medium").click(function() {
$("body").removeClass("light");
$("body").removeClass("dark");
$("body").addClass("medium");
localStorage.ClassName = "medium";
});
$("#dark").click(function() {
$("body").removeClass("light");
$("body").removeClass("medium");
$("body").addClass("dark");
localStorage.ClassName = "dark";
});
});
I have also, to note, tried the individual sections (with their relevant class names) as
$("#dark").click(function() {
$("body").removeClass("light");
$("body").removeClass("medium");
$("body").addClass(localStorage.getItem('dark'));
});
Your Problem is localStorage.getItem("dark") Should Be localStorage.getItem("ClassName")
And a best practice you should use method localStorage.setItem("ClassName", "light") to assign data
Here is a MDN article about LocalStorage.
This your code edited:
jQuery(window).on("load", function() {
$("#light").click(function(){
$("body").removeClass("medium");
$("body").removeClass("dark");
$("body").addClass("light");
localStorage.setItem("ClassName", "light")
});
$("#medium").click(function() {
$("body").removeClass("light");
$("body").removeClass("dark");
$("body").addClass("medium");
localStorage.setItem("ClassName", "medium")
});
$("#dark").click(function() {
$("body").removeClass("light");
$("body").removeClass("medium");
$("body").addClass("dark");
localStorage.setItem("ClassName", "dark")
});
});
$("#dark").click(function() {
$("body").removeClass("light");
$("body").removeClass("medium");
$("body").addClass(localStorage.getItem('ClassName'));
});