Hello, I am trying to make website with inclusive design for my homework and I have three functions that are changing the text size, text style and site color theme, but I can not save the changes after I reload the page. This is my code for changing the text size:
localStorage.setItem('z', '1');
function size() {
if (localStorage.getItem('z')=="1"){
txt = document.getElementById("a").style.fontSize = "25px";
localStorage.removeItem("z");
localStorage.setItem('z', '2');
}
else if (localStorage.getItem('z')=="2") {
txt = document.getElementById("a").style.fontSize = "30px";
localStorage.removeItem("z");
localStorage.setItem('z', '3');
}
else {
txt = document.getElementById("a").style.fontSize = "20px";
localStorage.removeItem("z");
localStorage.setItem('z', '1');
}
}
The code in my html is this:
<body onload="size()">
<button type="button" " onclick="size();">Change Text Size</button>
<div id='a'>Some text</div>
</body>
I believe I can make the other two function save their changes If I see how to make this one.
Thank you !
