Ad

Why Does My For Loop Stop After One Execution?

- 1 answer

I created an array with four objects. I am attempting to show a new random object in the array each time a button (HAPPY) is clicked, using a FOR loop. However, on button click, the loop only runs once with no error messages given. I have looked through other peoples' for loops and they are similar or identical to mine. So I am not sure where I have gone wrong.

I know that a small part of code is missing to bring everything together. I suspected it was something to do with [i] and have tried adding this to different parts of the code - to no avail.

Any help appreciated, thank you. JS Fiddle 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" target="_blank" rel="nofollow noreferrer" href="style.css">
  <title>Bible</title>

  <script src="script.js"></script>

  <script src="https://kit.fontawesome.com/cd801faa65.js" crossorigin="anonymous"></script>

  <link target="_blank" rel="nofollow noreferrer" 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>

Ad

Answer

You get random verse for once :

let randomVerse = happyVerses[Math.floor(Math.random()*happyVerses.length)]; let newTitle = randomVerse.title; let newVerse = randomVerse.verse;

Put this in the changetext function to get random verse every time. Like this:

  changeText = () => {
let randomVerse = happyVerses[Math.floor(Math.random()*happyVerses.length)];
    pageTitle.innerHTML = randomVerse.title;
    pageVerse.innerHTML = randomVerse.verse;
  }
Ad
source: stackoverflow.com
Ad