Я создал массив с четырьмя объектами. Я пытаюсь показать новый случайный объект в массиве каждый раз, когда нажимается кнопка (HAPPY), используя FOR l oop. Однако при нажатии кнопки l oop запускается только один раз, без сообщений об ошибках. Я просматривал петли других людей, и они похожи или идентичны моим. Поэтому я не уверен, где я ошибся.
Я знаю, что небольшая часть кода отсутствует, чтобы собрать все воедино. Я подозревал, что это как-то связано с [i], и пытался добавить это в разные части кода - безрезультатно.
Любая помощь приветствуется, спасибо. JS Скрипка ЗДЕСЬ
window.onload = () => {
/* HTML ELEMENTS */
var arrow = document.getElementById("arrow");
var welcomeButton = document.getElementById("welcome-button");
var welcomeBox = document.getElementById("welcome-box");
var introQuestion = document.getElementById("intro-question");
var happyButton = document.getElementById("happy");
const nextVerseButton = document.querySelector(".box-button");
const slider = document.querySelector(".happy-slider");
const bibleBox = document.querySelector(".happy-bible-box");
var pageTitle = document.getElementById("title");
var pageVerse = document.getElementById("verse");
const happyVerses = [{
title: "Psalm 28:7",
verse: "The Lord is my strength and shield. I trust him with all my heart. He helps me, and my heart is filled with joy.I burst out in songs of thanksgiving."
},
{
title: "Philippians 4:4",
verse: "Rejoice in the Lord always. Again I will say, rejoice!"
},
{
title: "John 15:11",
verse: "These things have I spoken to you, that My joy may remain in you, and that your joy may be full."
},
{
title: "2 Corinthians 6:10",
verse: "Our hearts ache, but we always have joy. We are poor, but we give spiritual riches to others.We own nothing, and yet we have everything."
},
];
console.log(happyVerses);
// Random verse
const randomVerse = happyVerses[Math.floor(Math.random() * happyVerses.length)];
let newTitle = randomVerse.title;
let newVerse = randomVerse.verse;
welcomeButton.onclick = () => {
welcomeBox.style.display = "none";
introQuestion.style.display = "flex";
}
happyButton.onclick = () => {
introQuestion.style.display = "none";
arrow.style.display = "block";
bibleBox.style.display = "block";
}
arrow.onclick = () => {
arrow.style.display = "none";
introQuestion.style.display = "flex";
bibleBox.style.display = "none";
}
changeText = () => {
pageTitle.innerHTML = newTitle;
pageVerse.innerHTML = newVerse;
}
nextVerseButton.onclick = () => {
for (i = 0; i < happyVerses.length; i++) {
changeText();
};
i++;
}
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
}
.fade {
transition: ease 0.3s;
opacity: 0;
}
button {
cursor: pointer;
transition: ease 0.3s;
}
button:hover {
background-color: white !important;
color: black !important;
transform: scale(1.1, 1.1);
}
.page-wrap {
width: 1000px;
max-width: 100%;
/*Wrapper width*/
margin-left: 5%;
/*Nice space between content and device border*/
margin-right: 5%;
/*Nice space between content and device border*/
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 500px;
position: relative;
}
#arrow {
align-self: flex-start;
position: absolute;
top: 0;
font-size: 2em;
color: white;
display: none;
cursor: pointer;
}
#header-2 {
width: 100%;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
}
#header-2 h1 {
color: white;
}
main {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #0E7CFF;
}
#main-wrap {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#welcome-box {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#welcome h1 {
color: white;
margin-bottom: 12px;
}
#welcome-button {
padding: 12px 30px 12px 30px;
border: solid 1.5px white;
border-radius: 50px;
background-color: transparent;
color: white;
}
#button-div {
display: flex;
flex-direction: column;
display: flex;
justify-content: space-evenly;
max-width: 300px;
width: 100%;
}
#button-div button {
margin-top: 20px;
margin-bottom: 20px;
padding: 12px;
}
#intro-question {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
display: none;
}
#intro-question button {
padding: 12px;
border: solid 1.5px white;
border-radius: 50px;
background-color: transparent;
color: white;
}
#intro-question button:nth-child(1) {
margin-top: 0;
}
#intro-question button:nth-child(4) {
margin-bottom: 0;
}
#intro-question h1 {
font-size: 2em;
margin-bottom: 50px;
}
.happy-bible-box {
color: white;
max-width: 500px;
width: 100%;
display: none;
transition: ease 0.3s;
}
#title {
font-family: 'Baloo Bhaina 2', cursive;
font-weight: 400;
}
.happy-bible-box p {
margin-top: 12px;
margin-bottom: 30px;
font-family: 'Baloo Bhaina 2', cursive;
transition: all 0.5s;
}
.box-button {
padding-left: 20px;
padding-right: 20px;
padding-top: 10px;
padding-bottom: 10px;
border: solid 1.5px white;
border-radius: 50px;
background-color: transparent;
color: white;
font-family: 'Baloo Bhaina 2', cursive;
}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Bible</title>
<script src="script.js"></script>
<script src="https://kit.fontawesome.com/cd801faa65.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Baloo+Bhaina+2:400,500&display=swap" rel="stylesheet">
</head>
<body>
<main id="main">
<div class="page-wrap">
<i class="fa fa-angle-left" id="arrow"></i>
<div id="welcome-box">
<h1>Welcome to Bible</h1>
<button id="welcome-button">Let's go</button>
</div>
<div id="intro-question">
<h1>How are you feeling today?</h1>
<div id="button-div">
<button id="happy">Happy</button>
<button id="anxious">Anxious</button>
<button id="worried">Worried</button>
<button id="lustful">Confused</button>
</div>
</div>
<article class="happy-bible-box">
<h2 id="title">John 15:11</h2>
<p id="verse">These things have I spoken to you, that My joy may remain in you, and that your joy may be full.</p>
<button class="box-button">Show me another</button>
</article>
</div>