Iterating through an array with conditional statements in JavaScript

Question

Iterating through an array with conditional statements in JavaScript

I have recently joined this community and am new to coding. Unfortunately, I do not have anyone who can assist me with my issue. I have watched numerous YouTube videos in an attempt to solve the problem myself. I am working on looping through the array below using if-then and else statements along with the cardCounter function. My goal is to have each item in the array appear individually on the screen and then disappear one by one. However, when I open it in my browser, the array just appears as lines of text.

Here is the code I am currently using:

<script>
     const calm1 = [];
         calm1[0]= "Silence is the element in which great things fashion themselves 
          together. —Thomas Carlyle";
         calm1[1]= "Take a deep breathe in and count to 7 seconds ";
         calm1[2]= "Take a slow exhale out";
         calm1[3]= "Self-care is not selfish. You cannot serve from an empty vessel.– Eleanor Brown";
         calm1[4]= "Loneliness is a sign you are in desperate need of yourself.― Rupi Kaur,";
         calm1[5]= "do not look for healing at the feet of those who broke you― Rupi Kaur,";
         calm1[6]= "if you were born with the weakness to fall you were born with the strength to rise― Rupi Kaur";
         calm1[7]= "you kill your future by mourning the past― R.H. Sin";
         calm1[8]= "Our backs tell stories no books have the spine to carry― Rupi Kaur";
         calm1[9]= "what is stronger than the human heart which shatters over and over and still lives― Rupi Kaur";
         calm1[10]= "the world gives you so much pain and here you are making gold out of it- there is nothing purer than that― Rupi Kaur";
         calm1[11]= "fall in love with your solitude― Rupi Kaur";
         calm1[12]= "You do not just wake up and become the butterfly - Growth is a process.― Rupi Kaur";
         document.getElementById("calm").innerHTML = calm1;

     var words = document.getElementById('calm');
     var text = -1;
     function cardCounter () {
        text++;
        if (text<calm1.length) {
            words = calm1[text];
        }
        else {
            words = -1;
            clearInterval(intervalTimer);
        }

     ;}  
     var intervalTimer = setInterval(function(){cardCounter()},5000);

 </script>

javascript arrays function loops if-statement

Answer 1

Answer №1

If you're looking to update text in a div periodically, there are various methods to achieve this. Here's an example that you can follow:

const calmingQuotes = [
  "Silence is the element in which great things fashion themselves together. —Thomas Carlyle",
  "Take a deep breath in and count to 7 seconds ",
  "Take a slow exhale out",
  "Self-care is not selfish. You cannot serve from an empty vessel.– Eleanor Brown",
  "Loneliness is a sign you are in desperate need of yourself.― Rupi Kaur,",
  "do not look for healing at the feet of those who broke you― Rupi Kaur,",
  // more quotes here
];

let index = 0;

function setText(index) {
  document.getElementById("calm").innerText = calmingQuotes[index];
}

setText(index);

setInterval(() => {
  if (index + 1 == calmingQuotes.length) index = 0;
  else ++index;
  
  setText(index);
}, 5000);

<html>

<body>

  <div id="calm">

  </div>
</body>

</html>

Answer 2

If you're looking to update text in a div periodically, there are various methods to achieve this. Here's an example that you can follow:

const calmingQuotes = [
  "Silence is the element in which great things fashion themselves together. —Thomas Carlyle",
  "Take a deep breath in and count to 7 seconds ",
  "Take a slow exhale out",
  "Self-care is not selfish. You cannot serve from an empty vessel.– Eleanor Brown",
  "Loneliness is a sign you are in desperate need of yourself.― Rupi Kaur,",
  "do not look for healing at the feet of those who broke you― Rupi Kaur,",
  // more quotes here
];

let index = 0;

function setText(index) {
  document.getElementById("calm").innerText = calmingQuotes[index];
}

setText(index);

setInterval(() => {
  if (index + 1 == calmingQuotes.length) index = 0;
  else ++index;
  
  setText(index);
}, 5000);

<html>

<body>

  <div id="calm">

  </div>
</body>

</html>

Answer 3

Answer №2

The If/Then/Else construct is designed for decision making and does not support iteration over a collection of objects.

If you need to iterate through a list, you should use a loop such as a FOR loop.

Your function will resemble something like this. To make it more general, I have adjusted some variable names.

// Initialize the statements array
const phrases = [];
// Select the HTML element you wish to modify
const displayElement = document.getElementById('display');
// Create a time delay function that resolves after a specified number of milliseconds
const timer = ms => new Promise(resolve => setTimeout(resolve, ms))

// Define an asynchronous function that includes an awaited function call
async function phraseIterator(delay) {
  // Loop through each statement in the array and perform actions on them
  for(const phrase of phrases) {
    // Update the text property of the HTML element with the current statement
    displayElement.innerText = phrase;
    // Invoke the timer method we defined earlier to pause execution for a set duration
    await timer(delay);
  } 
}

You can now invoke your function whenever you want to begin cycling through the quotes

phraseIterator(5000);

Credit goes to this stackoverflow post for guidance on creating the timer functionality.

Answer 4

The If/Then/Else construct is designed for decision making and does not support iteration over a collection of objects.

If you need to iterate through a list, you should use a loop such as a FOR loop.

Your function will resemble something like this. To make it more general, I have adjusted some variable names.

// Initialize the statements array
const phrases = [];
// Select the HTML element you wish to modify
const displayElement = document.getElementById('display');
// Create a time delay function that resolves after a specified number of milliseconds
const timer = ms => new Promise(resolve => setTimeout(resolve, ms))

// Define an asynchronous function that includes an awaited function call
async function phraseIterator(delay) {
  // Loop through each statement in the array and perform actions on them
  for(const phrase of phrases) {
    // Update the text property of the HTML element with the current statement
    displayElement.innerText = phrase;
    // Invoke the timer method we defined earlier to pause execution for a set duration
    await timer(delay);
  } 
}

You can now invoke your function whenever you want to begin cycling through the quotes

phraseIterator(5000);

Credit goes to this stackoverflow post for guidance on creating the timer functionality.

Iterating through an array with conditional statements in JavaScript

Answer №1

Answer №2

Similar questions

Problem with Bcryptjs Async Implementation

The error callback in Jquery ajax is triggered despite receiving a 200 status code in the response

Utilizing a single variable across different JavaScript scripts - where one script includes a .ready function while the other does not

Utilizing Vue's v-for directive to manipulate data through custom looping

NodeJS: Issue with Route is disrupting the functionality of the Restful API

When working with an Angular application, IE9 may display the error message: "An internal error occurred in the Microsoft Internet extensions"

Updating the Keycloak token in VueJS using keycloak-js even when it is still valid

Send out Chrome Desktop notifications to reach all users

Unable to close expanded grid item using close button

A guide on incorporating unique font weights into Material UI

jQuery efficiently handles large amounts of text data transfer (gradual loading)

What is the best way to confirm checkbox selection based on MySQL data?

What is the best way to update object values only when changes occur, and leave the object unchanged if no changes

Tips on modifying the content of a Material UI Card

How to trigger a jQuery function once a v-for loop has completed in VueJS?

Uploading files with Vue.js Element-UI and axios triggers unwanted page refresh

What is the process for displaying a list of all files within a folder?

Issues with reactivity are present in certain items within Vue.js cards

Ways to extract text from a temporary element

Error with the Knockout framework's inability to bind to the model