我创建了一个包含四个对象的数组。我试图使用FOR循环在每次单击按钮(HAPPY)时在数组中显示一个新的随机对象。但是,单击按钮时,循环仅运行一次,没有给出错误消息。我浏览了其他人的循环,它们与我的循环相似或相同。所以我不确定哪里出了问题。
我知道缺少一小段代码以将所有内容组合在一起。我怀疑这与[i]有关,并尝试将其添加到代码的不同部分-无济于事。
任何帮助表示感谢,谢谢。 JS小提琴HERE
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>
答案 0 :(得分:1)
您一次获得了随机经文:
let randomVerse = happyVerses[Math.floor(Math.random()*happyVerses.length)];
let newTitle = randomVerse.title;
let newVerse = randomVerse.verse;
将此内容放置在changetext函数中,以便每次获取随机经文。 像这样:
changeText = () => {
let randomVerse = happyVerses[Math.floor(Math.random()*happyVerses.length)];
pageTitle.innerHTML = randomVerse.title;
pageVerse.innerHTML = randomVerse.verse;
}
答案 1 :(得分:0)
您必须将randomVerse
放入changeText()
函数中,以使其在每次单击nextVerseButton
时被执行
答案 2 :(得分:0)
您不需要for循环,只需运行change函数:changeText();
答案 3 :(得分:-1)
您的逻辑有些混乱。您需要获得另一首随机经文,您的for循环当前每次都只设置相同的内容
nextVerseButton.onclick = () => {
let randomVerse = happyVerses[Math.floor(Math.random()*happyVerses.length)];
let newTitle = randomVerse.title;
let newVerse = randomVerse.verse;
changeText();
}