Help with using Jquery to loop through hardwired quotes | Random Quote Machine

#1

Hi, I’m having trouble getting my quote machine to loop through my array and display new quotes. I hard coded a few quotes and authors because i still haven’t wrapped my head around getting quotes from apis.
Feel free to take a look at my code pen link and offer any advice or suggestions .

Thanks in advance!

#2

When you click the “Get New Quote” button, what are you hoping to see on the screen?

#3

To start there is an error in your logic: the for loop in your click handler instantly cycles to the end so we can only see the Steve Jobs quote.

Here’s a forked pen:

  var index =0; // Let's show a quote on page load
  $("#newQuote").html('"' + quotes[index].quote + '"');
  $("#author").html("-" + quotes[index].author + "-");
  
  
 $("#quotes").on("click", function(){ 
  if(index < quotes.length-1){ // if the index is less than the length
    index++; // Increment
   } else{ index =0;} // Otherwise start at the beginning
  $("#newQuote").html('"' + quotes[index].quote + '"');  //Update the text regardless
  $("#author").html("-" + quotes[index].author + "-");
  });
1 Like
#4

There’s a few issues going on.

  1. First of all there’s an error in the console, You need to include jQuery before Bootstrap’s js as Bootstarp’s js depends on jQuery.

  2. You currently loop until quotes.length+1, the condition should be quotes.length

1 Like
#5

Thanks for the quick response. Taking a look now.

#6

Hi, Thank you. Checking it out now.

#7