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

[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