Форум

Сергей Ракипов · #31 (**permalink**) 08.09.2020, 11:53

Вот я что то подобное что мне нужно сделал, в песочности

const body = document.querySelector("body");
const knopka_1 = document.querySelector(".knopka_1");
const knopka_2 = document.querySelector(".knopka_2");

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_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_1 = () => {
	if (localStorage.getItem("chernyi_fon")!==null){
		body.className = "chernyi_fon";
	}
}
window.addEventListener("load", fun_1);


let fun_2 = () => {
	if (localStorage.getItem("belyi_fon")!==null){
		body.className = "belyi_fon";
	}
}
window.addEventListener("load", fun_2);

Но понимаю что это не самое лучше решение.

Сергей Ракипов · #32 (**permalink**) 08.09.2020, 13:09

Rise,
У меня почему то не получилось его адаптировать

Мне любой вариант подойдет главное что бы был мне понятен и я смог его вживить в свой проект.

Сергей Ракипов · #33 (**permalink**) 08.09.2020, 13:28

Вот уже тут не работает

<!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>

Он почему то применяйт только одно значение

Сергей Ракипов · #34 (**permalink**) 08.09.2020, 14:39

По другому сделал и заработало, я стал править сам стиль а не стили.

И не понимаю как лучше сделать

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.style.backgroundColor = "#fff";
	body.style.color = "#000";

	localStorage.setItem("belyi_fon", "#fff");
	localStorage.removeItem("chernyi_fon");
}
knopka_1.addEventListener("click", fun_knopka_1);

let fun_1 = () => {
	if (localStorage.getItem("belyi_fon")!==null){
		body.style.backgroundColor = "#fff";
		body.style.color = "#000";
	}
}
window.addEventListener("load", fun_1);

let fun_knopka_2 = () => {
	body.style.backgroundColor = "#000";
	body.style.color = "#fff";

	localStorage.setItem("chernyi_fon", "#000");
	localStorage.removeItem("belyi_fon");
}
knopka_2.addEventListener("click", fun_knopka_2);

let fun_2 = () => {
	if (localStorage.getItem("chernyi_fon")!==null){
		body.style.backgroundColor = "#000";
		body.style.color = "#fff";
	}
}
window.addEventListener("load", fun_2);

let fun_knopka_3 = () => {
	body.style.fontSize = "0.8rem";

	localStorage.setItem("osnovnoi_razmer", ".8rem");
	localStorage.removeItem("uvelichenyi_razmer");
}
knopka_3.addEventListener("click", fun_knopka_3);

let fun_3 = () => {
	if (localStorage.getItem("osnovnoi_razmer")!==null){
		body.style.fontSize = "0.8rem";
	}
}
window.addEventListener("load", fun_3);

let fun_knopka_4 = () => {
	
	body.style.fontSize = "1.6rem";

	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.style.fontSize = "1.6rem";
	}
}
window.addEventListener("load", fun_4);

Сергей Ракипов · #35 (**permalink**) 29.12.2020, 05:00

Не понимаю где допускаю ошибку.
Должно быть кликнул по первой кнопки, появилась вторая, если кнопки уже были нажаты ранее они не появляются.
У меня почему то можно нажать только одну кнопку и последовательность сбита.

<style>
.polzovatelskoe_soglashenie_i_nastroiki_vida_obertka {
    width: 100%;
    height: auto;
    background-color: #3866F3;
    color: #fff;
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
}
.polzovatelskoe_soglashenie_i_nastroiki_vida_obertka  a{
    color: #fff;
}
.polzovatelskoe_soglashenie_i_nastroiki_vida_obertka  a:hover{
    text-decoration: none;
}
.polzovatelskoe_soglashenie_obertka{
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    width: 100%;
    height: auto;
    background-color: #3866F3;
    z-index: 10;
    display: none;
}
.polzovatelskoe_soglashenie_blok {
    max-width: 960px;
    margin: 0 auto;
    padding: 20px 0px 0px 0px;
    display: grid;
    grid-template-columns: 320px 320px;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas: 
        "polzovatelskoe_soglashenie_tekst polzovatelskoe_soglashenie_tekst"
        "polzovatelskoe_soglashenie_oznakomitsa knopka_ptinyat_polzovatelskoe_soglashenie_blok"
        "nomer_polzovatelskoe_soglashenie nomer_polzovatelskoe_soglashenie";
    justify-content: center;
    align-items: center;
    background-color: #3866F3;
    color: #fff;
}
.polzovatelskoe_soglashenie_tekst {
    grid-area: polzovatelskoe_soglashenie_tekst;

}
.polzovatelskoe_soglashenie_oznakomitsa {
    grid-area: polzovatelskoe_soglashenie_oznakomitsa;
}
.knopka_ptinyat_polzovatelskoe_soglashenie_blok {
    grid-area: knopka_ptinyat_polzovatelskoe_soglashenie_blok;
}
.nomer_polzovatelskoe_soglashenie {
    grid-area: nomer_polzovatelskoe_soglashenie;
    display: flex;
    justify-content: center;
    align-items: center;
}
.knopka_ptinyat_polzovatelskoe_soglashenie {
    width: 280px;
    height: 80px;
    background-color: #4369DF;
    border: 4px solid #2249C7;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.knopka_ptinyat_polzovatelskoe_soglashenie:hover {
    background-color: #395BBF;
}
.nastroiki_vida_obertka{
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    width: 100%;
    height: auto;
    background-color: #3866F3;
    display: none;
}
.nastroiki_vida_blok {
    max-width: 960px;
    margin: 0px auto 0px;
    padding: 20px 0px 0px 0px;
    display: grid;
    grid-template-columns: 320px 320px;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas: 
        "nastroiki_vida_blok_tekst nastroiki_vida_blok_tekst"
        "ponyal_pereti_nastroiki_vida knopka_ponyal_blok"
        "nomer_nastroiki_vida nomer_nastroiki_vida";
    justify-content: center;
    align-items: center;
    background-color: #3866F3;
    color: #fff;
}
.nastroiki_vida_blok_tekst {
    grid-area: nastroiki_vida_blok_tekst;
}
.ponyal_pereti_nastroiki_vida {
    grid-area: ponyal_pereti_nastroiki_vida;
}
.knopka_ponyal_blok {
    grid-area: knopka_ponyal_blok;
}
.knopka_ponyal{
    width: 280px;
    height: 80px;
    background-color: #4369DF;
    border: 4px solid #2249C7;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.knopka_ponyal:hover{
    background-color: #395BBF;
}
.nomer_nastroiki_vida {
    grid-area: nomer_nastroiki_vida;
    display: flex;
    justify-content: center;
    align-items: center
}
.knopka_ponyal {

}
.nomer_liniya {
    width: 40%;
    height: 1px;
    margin: 0 auto;
    background-color:#fff;
}
.nomer {

}
.shrift_belyi_32 {
    font-size: 32px;
}
.polzovatelskoe_soglashenie_obertka.prinyat{
    display: block;
}
.nastroiki_vida_obertka.prinyat{
    display: block;
}
</style>
<div class="polzovatelskoe_soglashenie_i_nastroiki_vida_obertka">
	<div class="polzovatelskoe_soglashenie_obertka">
		<div class="polzovatelskoe_soglashenie_blok">
				<div class="polzovatelskoe_soglashenie_tekst">
					Мы просим вас принять пользовательское соглашение сайта.
				</div>
				<div class="polzovatelskoe_soglashenie_oznakomitsa">
					<a href="#">Ознакомиться</a>
				</div>
				<div class="knopka_ptinyat_polzovatelskoe_soglashenie_blok">
					<div class="knopka_ptinyat_polzovatelskoe_soglashenie">
						Принимаю
					</div>
				</div>
				<div class="nomer_polzovatelskoe_soglashenie">
					<div class="nomer_liniya"></div>
					<div class="nomer">
						1/2
					</div>
					<div class="nomer_liniya"></div>
				</div>
		</div>
	</div>
	<div class="nastroiki_vida_obertka">
		<div class="nastroiki_vida_blok">
			<div class="nastroiki_vida_blok_tekst">
				Хотим обратить ваше внимание, <span class="shrift_belyi_32">настройка внешнего вида сайта</span> для людей со слабым зрением находится в самом низу сайта
			</div>
			<div class="ponyal_pereti_nastroiki_vida">
				<a href="#">ПОНЯЛ/А, перейти к настройке</a>
			</div>
			<div class="knopka_ponyal_blok">
				<div class="knopka_ponyal">
					ПОНЯЛ/А
				</div>
			</div>
			<div class="nomer_nastroiki_vida">
				<div class="nomer_liniya"></div>
				<div class="nomer">
					2/2
				</div>
				<div class="nomer_liniya"></div>
			</div>
		</div>
	</div>
</div>

<script>
let polzovatelskoe_soglashenie_obertka = document.querySelector(".polzovatelskoe_soglashenie_obertka");
let knopka_ptinyat_polzovatelskoe_soglashenie = document.querySelector(".knopka_ptinyat_polzovatelskoe_soglashenie");
let nastroiki_vida_obertka = document.querySelector(".nastroiki_vida_obertka");
let knopka_ponyal = document.querySelector(".knopka_ponyal");


window.onload = function(){

    if (!localStorage.getItem("skryt_1")){
        polzovatelskoe_soglashenie_obertka.classList.add("prinyat");
        knopka_ptinyat_polzovatelskoe_soglashenie.onclick = function() {
        polzovatelskoe_soglashenie_obertka.classList.remove("prinyat");
        localStorage.setItem("skryt_1", "none")
        }
    }
}

function prinyal_1(){
	polzovatelskoe_soglashenie_obertka.style.display = "none";
	localStorage.setItem("skryt_1","none");
}
knopka_ptinyat_polzovatelskoe_soglashenie.onclick = prinyal_1;


window.onload = function(){

    if (!localStorage.getItem("skryt_2")){
        nastroiki_vida_obertka.classList.add("prinyat");
        knopka_ponyal.onclick = function() {
            nastroiki_vida_obertka.classList.remove("prinyat");
        localStorage.setItem("skryt_2", "none")
        }
    }
}

function prinyal_2(){
	nastroiki_vida_obertka.style.display = "none";
	localStorage.setItem("skryt_2","none");
}
knopka_ponyal.onclick = prinyal_2;
</script>

voraa · #36 (**permalink**) 29.12.2020, 07:05

Почему два раза
window.onload = function(){
?

Второе отменяет первое.

Сергей Ракипов · #37 (**permalink**) 29.12.2020, 07:25

Сообщение от voraa

Почему два раза
window.onload = function(){
?

Второе отменяет первое.

Понял, не знал.
А как тогда записать условия после if

laimas · #38 (**permalink**) 29.12.2020, 11:01

Сергей Ракипов,
не только это, но и prinyal_1(), и prinyal_2() тоже близнецы.

Сергей Ракипов · #39 (**permalink**) 30.12.2020, 07:23

А как правильно написать?

laimas · #40 (**permalink**) 30.12.2020, 08:54

Ну видимо правильно будет получить коллекцию элементов, обходом в цикле проверять - если есть в хранилище ключ равный стилю (или другое) кнопки, то ..., иначе ...

Форум

Справочник

Discord чат

Курсы javascript