Вот уже тут не работает
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
font-family: Verdana, Geneva CY, Helvetica, DejaVu Sans, Arial, sans-serif;
font-size: .8rem;
line-height: 160%;
}
.main{
max-width: 480px;
margin: 0 auto;
}
.knopka_1 {
height: 24px;
width: 24px;
display: inline-flex;
justify-content: center;
align-items: center;
background-color: #fff;
color: #000;
padding: 5px;
border: 1px solid #8b00ff;
cursor: pointer;
}
.knopka_1:hover {
background-color: #8b00ff;
color: #fff;
padding: 5px;
border: 1px solid #000;
}
.knopka_2 {
height: 24px;
width: 24px;
display: inline-flex;;
justify-content: center;
align-items: center;
background-color: #000;
color: #fff;
padding: 5px;
border: 1px solid #8b00ff;
cursor: pointer;
}
.knopka_2:hover {
background-color: #8b00ff;
color: #fff;
padding: 5px;
border: 1px solid #000;
}
.knopka_3 {
height: 24px;
width: 24px;
display: inline-flex;
justify-content: center;
align-items: center;
background-color: #fff;
color: #000;
padding: 5px;
border: 1px solid #8b00ff;
cursor: pointer;
}
.knopka_3:hover {
background-color: #8b00ff;
color: #fff;
padding: 5px;
border: 1px solid #000;
}
.knopka_4 {
height: 24px;
width: 24px;
display: inline-flex;
justify-content: center;
align-items: center;
background-color: #fff;
color: #000;
padding: 5px;
border: 1px solid #8b00ff;
cursor: pointer;
}
.knopka_4:hover {
background-color: #8b00ff;
color: #fff;
padding: 5px;
border: 1px solid #000;
}
.belyi_fon{
background-color: #fff;
color: #000;
}
.chernyi_fon{
background-color: #000;
color: #fff;
}
.osnovnoi_razmer{
font-size: .8rem;
}
.uvelichenyi_razmer{
font-size: 1.6rem;
}
</style>
</head>
<body>
<div class="main">
<div class="knopka_1"><div class="blok">А</div></div>
<div class="knopka_2"><div class="blok">А</div></div>
<div class="knopka_3"><div class="blok">1</div></div>
<div class="knopka_4"><div class="blok">2</div></div>
<br><br>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium corrupti ipsa quis deserunt aperiam similique, excepturi assumenda iste autem, impedit vitae iure officia voluptatem nulla quas repudiandae quaerat, magnam explicabo vero atque. Dicta dolores, nesciunt neque optio maxime officiis quisquam assumenda placeat. Placeat praesentium, eius expedita iusto natus, asperiores quaerat magni molestiae ad ipsum quia aut cupiditate officiis dicta ducimus assumenda aliquam optio quos quas eveniet nesciunt unde deserunt. Dolorem ducimus reprehenderit voluptatem ea saepe animi rerum quos aspernatur illum! Officiis praesentium incidunt nesciunt quas exercitationem fugiat ratione minus aut at obcaecati vitae magnam in ad facere alias, quibusdam adipisci soluta pariatur! Libero eaque reprehenderit ex molestiae, dicta doloremque tempore delectus, cupiditate nam officia amet error itaque asperiores quis est dolorum fugiat, ea nostrum vel voluptatem? Laborum, perferendis molestias minima iusto culpa obcaecati dolores sint soluta, facilis, officia iure! Odit laudantium corporis incidunt ullam eius similique ab earum quae temporibus quo, voluptatum, excepturi rerum saepe exercitationem? Odio omnis, laboriosam illum reiciendis similique beatae iusto amet voluptate architecto possimus reprehenderit, qui molestiae est excepturi magni accusamus voluptates vitae eveniet. Odio dolorem, facilis magni beatae a eius optio aspernatur libero ipsum ad sint, ratione eveniet! Quasi expedita minus, dolore commodi repellat itaque quae ipsam laudantium qui fugiat quis ad! Expedita odio accusamus architecto quo at fugit veniam quibusdam quis debitis reiciendis, tempora sapiente exercitationem ipsam rerum, ratione aperiam recusandae vero, officiis quaerat quia aspernatur nemo soluta laudantium. Amet voluptate nihil deleniti dolor? Aliquid esse id quod est ipsum facilis, incidunt sunt. Dolorem laborum tenetur neque corrupti sequi reprehenderit alias odit dolores enim. Quae dolorem distinctio rem explicabo esse mollitia laborum error, veritatis pariatur cumque cum alias ipsam earum? Eveniet asperiores quas quaerat quia sint dolore, at ipsa nobis velit provident ab hic aliquam autem ex modi? Cumque illo repellendus provident veritatis beatae.
</div>
<script>
const body = document.querySelector("body");
const knopka_1 = document.querySelector(".knopka_1");
const knopka_2 = document.querySelector(".knopka_2");
const knopka_3 = document.querySelector(".knopka_3");
const knopka_4 = document.querySelector(".knopka_4");
let fun_knopka_1 = () => {
body.classList.add("belyi_fon");
body.classList.remove("chernyi_fon");
localStorage.setItem("belyi_fon", "belyi_fon");
localStorage.removeItem("chernyi_fon");
}
knopka_1.addEventListener("click", fun_knopka_1);
let fun_1 = () => {
if (localStorage.getItem("belyi_fon")!==null){
body.className = "belyi_fon";
}
}
window.addEventListener("load", fun_1);
let fun_knopka_2 = () => {
body.classList.remove("belyi_fon");
body.classList.add("chernyi_fon");
localStorage.setItem("chernyi_fon", "chernyi_fon");
localStorage.removeItem("belyi_fon");
}
knopka_2.addEventListener("click", fun_knopka_2);
let fun_2 = () => {
if (localStorage.getItem("chernyi_fon")!==null){
body.className = "chernyi_fon";
}
}
window.addEventListener("load", fun_2);
let fun_knopka_3 = () => {
body.classList.add("osnovnoi_razmer");
body.classList.remove("uvelichenyi_razmer");
localStorage.setItem("osnovnoi_razmer", "osnovnoi_razmer");
localStorage.removeItem("uvelichenyi_razmer");
}
knopka_3.addEventListener("click", fun_knopka_3);
let fun_3 = () => {
if (localStorage.getItem("osnovnoi_razmer")!==null){
body.className = "osnovnoi_razmer";
}
}
window.addEventListener("load", fun_3);
let fun_knopka_4 = () => {
body.classList.add("uvelichenyi_razmer");
body.classList.remove("osnovnoi_razmer");
localStorage.setItem("uvelichenyi_razmer", "uvelichenyi_razmer");
localStorage.removeItem("osnovnoi_razmer");
}
knopka_4.addEventListener("click", fun_knopka_4);
let fun_4 = () => {
if (localStorage.getItem("uvelichenyi_razmer")!==null){
body.className = "uvelichenyi_razmer";
}
}
window.addEventListener("load", fun_4);
</script>
</body>
</html>
Он почему то применяйт только одно значение