Не понимаю где допускаю ошибку.
Должно быть кликнул по первой кнопки, появилась вторая, если кнопки уже были нажаты ранее они не появляются.
У меня почему то можно нажать только одну кнопку и последовательность сбита.
<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>