Нажав через несколько DOV в цикле ⇐ Javascript

[Anonymous]

Я делаю страницу, которая функционирует как визуальный роман -Sque -последовательность. В нем есть четыре этапа, в каждом из которых вы нажимаете в любом месте на странице, и это меняется на следующий этап. На последнем щелчке в любом месте перенаправляется на другую страницу на сайте.

После некоторого исследования я нашел этот пост и чувствовал, что решение было идеальным. (Оригинальный дисплей стиха-Flex), но по умолчанию по умолчанию направляют гибкость: ряд; Вместо того, что указано в CSS (столбец)?

Код: Выделить всё

const text = document.querySelector(".banner")
document.addEventListener('click', myFunction);

let verses = document.querySelector("#verses").children
let count = 0
function myFunction() {
Array.from(verses).forEach(el=> el.style.display="none")
if(count < verses.length){
verses[count].style.display = 'block'
count ++
if(count===verses.length) count =0
}
}
//code from https://stackoverflow.com/questions/71816135/how-to-iterate-with-click-event-through-array-of-divs< /code>
body {
background: #000000;
display: flex;
justify-content: center;
align-items: center;
min-height: 1200px;
}

ul {
list-style-position: outside;
list-style-type: "* ";
margin-left:20px;
width:100%;
}

verses{
display: flex;
background-color:black;
flex-direction: column;
justify-content:center;
align-items: center;
border:;
min-height:100px;
width:1000px;
margin:auto;
image-rendering: pixelated;
gap:0px;
}

.verse1{
display: flex;
background-color:black;
flex-direction: column;
justify-content:center;
align-items: center;
border:;
min-height:100px;
width:100%;
margin:auto;
image-rendering: pixelated;
gap:0px;
}

.verse2{
display: flex;
background-color:black;
flex-direction: column;
justify-content:center;
align-items: center;
border:;
min-height:100px;
width:100%;
margin:auto;
image-rendering: pixelated;
gap:0px;
}

.storygraphic1{
background-image: url("https://file.garden/ZqzaaX6Iv3i3b03H/revamp/nmnsprite.PNG");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
min-height: 500px;
width:80%;
image-rendering: pixelated;
}

.storygraphic2{
background-image: url("https://file.garden/ZqzaaX6Iv3i3b03H/revamp/nmnsprite.PNG");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
min-height: 500px;
width:80%;
image-rendering: pixelated;
}

.storytextbox{
font-family: UTDRmono;
color:white;
width:700px;
border:solid white 4px;
padding:15px;
background-color: black;
min-height:70px;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}< /code>




[*]










[list]
text1
[*]text2
[/list]

 



[list]
[*]TEXT3
[*]TEXT4
[/list]

 

Подробнее здесь: https://stackoverflow.com/questions/797 ... in-a-cycle