为什么我的 for 循环在执行一次后停止？

Question

我创建了一个包含四个对象的数组。每次单击按钮（HAPPY）时，我都尝试使用 FOR 循环在数组中显示一个新的随机对象。但是，单击按钮时，循环仅运行一次，没有给出错误消息。我查看了其他人的 for 循环，它们与我的相似或相同。所以我不确定我哪里出错了。

我知道缺少一小部分代码来整合所有内容。我怀疑这与 [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>

Answer 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;
  }

Answer 2

您必须将randomVerse 放入changeText() 函数中才能在每次点击nextVerseButton 时执行

Answer 3

你不需要for循环，只需运行change函数：changeText();

Answer 4

你的逻辑有点混乱。你需要得到另一个随机的诗句，你的 for 循环目前只是每次都设置相同的东西

nextVerseButton.onclick = () => {
 let randomVerse = happyVerses[Math.floor(Math.random()*happyVerses.length)];
 let newTitle = randomVerse.title;
 let newVerse = randomVerse.verse;
 changeText();
}