I would like to take an array of quotes and display a different qoute on my page every 6 seconds.

I have tried using a javascript function that loops through the array and fades in the new qoute. but I keep getting the error qoutes is not defined. I have tried moving the array into the function and into the $(document).ready() function and still got the same error.

Below is my app.js code:

var quotes = [
"Don't Limit Your Challenges, Challenge Your Limits.",
"If the doors of perception were cleansed every thing would appear to man as it is, Infinite.",
"The Power of Imaginiation Makes Us Infinite",
"The finite mind tries to limit the infinite.",
"The Only Limits In Our Life Are Those We Impose on Ourselves."
 ];


var quoteTimer = function(){

for(var i = 0; i< qoutes.length; i++){
    $('.container').find('h1').fadeIn().text(qoutes[i]);

}
}


$(document).ready(function(){

setInterval(quoteTimer, 6000);
});

I would like to take an array of quotes and display a different qoute on my page every 6 seconds.

I have tried using a javascript function that loops through the array and fades in the new qoute. but I keep getting the error qoutes is not defined. I have tried moving the array into the function and into the $(document).ready() function and still got the same error.

Below is my app.js code:

var quotes = [
"Don't Limit Your Challenges, Challenge Your Limits.",
"If the doors of perception were cleansed every thing would appear to man as it is, Infinite.",
"The Power of Imaginiation Makes Us Infinite",
"The finite mind tries to limit the infinite.",
"The Only Limits In Our Life Are Those We Impose on Ourselves."
 ];


var quoteTimer = function(){

for(var i = 0; i< qoutes.length; i++){
    $('.container').find('h1').fadeIn().text(qoutes[i]);

}
}


$(document).ready(function(){

setInterval(quoteTimer, 6000);
});

• javascript
• jquery
• arrays
• loops
• setinterval

• 3 notice that you declared the array quotes but then you are trying to loop an array called qoutes (they are not the same) - fix the typo first and try again if that does not help - having said that, you are printing all quotes inside the loop every time the function is invoked. – blurfus Commented Mar 7, 2016 at 4:39
• Check spelling of quotes. in for loop. – zakaiter Commented Mar 7, 2016 at 4:39

5 Answers 5

2 things:

First of all you have a typo in this line (qoutes instead of quotes)

for(var i = 0; i< qoutes.length; i++){
    $('.container').find('h1').fadeIn().text(qoutes[i]);
}

Second, the above code does not do what you think it does, it will quickly cycle through all quotes every 6 seconds, and display the last quote

Try something like the below, which will constantly pick a new random quote from the list.

  var quotes = [
    "Don't Limit Your Challenges, Challenge Your Limits.",
    "If the doors of perception were cleansed every thing would appear to man as it is, Infinite.",
    "The Power of Imaginiation Makes Us Infinite",
    "The finite mind tries to limit the infinite.",
    "The Only Limits In Our Life Are Those We Impose on Ourselves."
     ];


    var quoteTimer = function(){
      //pick a random quote
      var quote = getRandomInt(0,4)
      //display it
      $('.container').find('h1').fadeIn().text(quotes[quote]);
    }

    //function to pick a random integer.
    function getRandomInt(min, max) {
       return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    $(document).ready(function(){
       setInterval(quoteTimer, 6000);
    });

Fiddle

Try this:

var quotes = [
"Don't Limit Your Challenges, Challenge Your Limits.",
"If the doors of perception were cleansed every thing would appear to man as it is, Infinite.",
"The Power of Imaginiation Makes Us Infinite",
"The finite mind tries to limit the infinite.",
"The Only Limits In Our Life Are Those We Impose on Ourselves."
 ];


var quoteTimer = function(){
var num = Math.floor(Math.random() * 6);
    //console.log(quotes[num]);
    $('.container').find('h1').fadeIn().text(quotes[num]);
}


$(document).ready(function(){
    setInterval(quoteTimer, 6000);
});

... HTML ...

<div class="container">
  <h1>initial text</h1>
</div>

... js ...

// define quotes array
var quotes = [
  "Don't Limit Your Challenges, Challenge Your Limits.",
  "If the doors of perception were cleansed every thing would appear to man as it is, Infinite.",
  "The Power of Imaginiation Makes Us Infinite",
  "The finite mind tries to limit the infinite.",
  "The Only Limits In Our Life Are Those We Impose on Ourselves."
];

// initialise current quote index
var quoteIndex = 0;

// set target element
var $target = $('.container').find('h1');

// create timer function
var quoteTimer = function() {
  // set target text to current quote
  $target.fadeIn().text(quotes[quoteIndex]);
  // increment the current index, or reset to 0 if on the last quote
  quoteIndex = quoteIndex < quotes.length - 1 ? quoteIndex + 1 : 0;
}

// fire it up..!
$(document).ready(function() {
  setInterval(quoteTimer, 6000);
});

Fiddle: https://jsfiddle/zpj1jjxe/1/

Correct the typoqoutes, it should be quotes

setInterval will execute callback after specified duration and will continue so..You may have to invoke the handler(setInterval callback function) initially.

To achieve fadeOut effect, elements must be in invisible state.. Use .hide() before fadeIn()

Try this:

var quotes = [
  "Don't Limit Your Challenges, Challenge Your Limits.",
  "If the doors of perception were cleansed every thing would appear to man as it is, Infinite.",
  "The Power of Imaginiation Makes Us Infinite",
  "The finite mind tries to limit the infinite.",
  "The Only Limits In Our Life Are Those We Impose on Ourselves."
];
var i = 0;
var elem = $('.container').find('h1');
var quoteTimer = function() {
  elem.hide().fadeIn(1000).text(quotes[i]);
  i = ++i % quotes.length;
}
quoteTimer();
$(document).ready(function() {
  setInterval(quoteTimer, 6000);
});

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="container">
  <h1></h1>
</div>

Fiddle

Adjust your time delay and this should do the trick

Update: added fading

Update2: removed placeholder, added ments

var quotes = [
  "Don't Limit Your Challenges, Challenge Your Limits.",
  "If the doors of perception were cleansed every thing would appear to man as it is, Infinite.",
  "The Power of Imaginiation Makes Us Infinite",
  "The finite mind tries to limit the infinite.",
  "The Only Limits In Our Life Are Those We Impose on Ourselves."
];

// variable to keep track of last quote displayed
var i = 0;

// displays the next quote in the array
var quoteTimer = function() {
  
  // if at end of array, reset
  if (i >= quotes.length) {
    i = 0;
  }

  // fade out previous quote, 
  // while hidden, change the text to the next quote on the array
  $('h1').fadeOut(1000, function(){
    $(this).text(quotes[i]);
  });
  
  // display the quote
  $('h1').fadeIn();

  // increment counter by one
  i++;
}


$(document).ready(function() {
  $('h1').text(quotes[i++]); // initialize with first quote
  setInterval(quoteTimer, 6000);
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1></h1>