Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Willie Suggs
PLUS
Willie Suggs
Courses Plus Student 5,879 Points

why is my for loop only storing the last object in my object?

when my button is clicked I'm trying to get my javascript to loop throw my object starting at index 0 and then return that index to my html to be displayed, once button click again index 1 should be selected and so on... When I click my button my html displays my quotes object last index, when clicked again nothing happens

const quotes = [

    { 
      quote: "Being the richest man in the cemetery doesn't matter to me.\n\
              Going to bed at night saying we've done something wonderful, that's what matters to me.",

      person: "Steve Jobs"
    },

    { 
      qutoe: "Simplicity is the ultimate sophistication.", 

      person:"Leonardo da Vinci"
    },

    { 
      quote: "Innovation distinguishes between a leader and a follower.",

      person: "Steve Jobs"
    },

    {
      quote: "As a well-spent day brings happy sleep, so a life well spent brings happy death.", 

      person: "Leonardo da Vinci"
    },

    {
      quote:"Sometimes life is going to hit you in the head with a brick. Don't lose faith.", 

      person: " Steve Jobs"
    },

    { 
      quote: "The noblest pleasure is the joy of understanding.", 

      person: "Leonardo da Vinci"},

    {
      quote: "I'm convinced that about half of what separates the successful entrepreneurs \n\
               from the non-successful ones is pure perseverance.", 

      person: "Steve Jobs"
    },

    {
      quote:"The greatest deception men suffer is from their own opinions.", 

      person: "Leonardo da Vinci"
    },

    {
      quote: "Innovation distinguishes between a leader and a follower.", 

      person: "Steve Jobs"
    },

    {
      quote: "Iron rusts from disuse, stagnant water loses its purity and in cold weather becomes frozen, \n\
               even so does inaction sap the vigor of the mind.", 

     person: "Leonardo da Vinci"
    },

    {
      quote: "Simplicity is the ultimate sophistication.", 

      person: "Leonardo da Vinci"
    }
];

const quoteButton = document.querySelector("#quoteButton");
const quoteDisplay = document.querySelector("#quoteDisplay");
let getQuote;
let getPerson;
let count = 0;

const displayQuote = () => {

    for(let i =0; i < quotes.length; i++){
      getQuote = quotes[i].quote;
      getPerson = quotes[i].person;

     if(quotes[count].quote === quotes[i].quote){ 
     quoteDisplay.innerHTML = '<q>' + '<i>' + getQuote + '</i>' + '</q>' + '<br/>' + '<b>' + getPerson  + '</b>';

    }
     count +=  1;
   }
 };

quoteButton.addEventListener('click', () => {
    displayQuote();
});
blake guyan
blake guyan
8,297 Points

i dont understand the if statement. why not have the for loop construct the statement and the event listener print the quote and have it then increment i += 1 ? that way eah way you click the button i increases and presents a new quote until you have 4.

Hey Willie Suggs, I learn through TTH, YT, Blog Posts, Twitter, Podcasts, Books, Documentation, Testing, Prototyping, Teaching, Presenting, Code Reviewing, Asking, Answering so I would say many mediums and not only focusing on TTM . TTH is great to get you started but there is infinite resources out there where you can learn from. Keep it up!

TTH = Team Tree House YT = YouTube

Willie Suggs
Willie Suggs
Courses Plus Student 5,879 Points

Helmut Granda, thanks for the advice and insight, it's highly appreciated!

5 Answers

William Olojede
PLUS
William Olojede
Courses Plus Student 2,752 Points

Hello willie, your loop is only storing the last quote because it is overriding the previous value after each iteration, this is because getQuote is a variable and it can only hold one value at a time, you should use an array to hold multiple values.

blake guyan
blake guyan
8,297 Points

thats the point of the for loop. he only wants getquote to hold the value for the current [i]. he is using and object array to store the quotes.

Willie Suggs
PLUS
Willie Suggs
Courses Plus Student 5,879 Points

blake guyan I wanted to do it how you mentioned it but couldn't figure it out.

I wasn't (and still not sure) what is your end goal. If it is to show one item as you click the button or all elements at the same time. So I went with the idea that you wanted to load a new one when you click on the button.

I did notice two things, 1 there is an issue on your second "quote" element, it is named "qutoe" which was breaking your loop on the second click. 2. Was it needed to test against the quote itself?

const quotes = [

    { 
      quote: "Being the richest man in the cemetery doesn't matter to me.\n\
              Going to bed at night saying we've done something wonderful, that's what matters to me.",

      person: "Steve Jobs"
    },

    { 
      quote: "Simplicity is the ultimate sophistication.", 

      person:"Leonardo da Vinci"
    },

    { 
      quote: "Innovation distinguishes between a leader and a follower.",

      person: "Steve Jobs"
    },

    {
      quote: "As a well-spent day brings happy sleep, so a life well spent brings happy death.", 

      person: "Leonardo da Vinci"
    },

    {
      quote:"Sometimes life is going to hit you in the head with a brick. Don't lose faith.", 

      person: " Steve Jobs"
    },

    { 
      quote: "The noblest pleasure is the joy of understanding.", 

      person: "Leonardo da Vinci"},

    {
      quote: "I'm convinced that about half of what separates the successful entrepreneurs \n\
               from the non-successful ones is pure perseverance.", 

      person: "Steve Jobs"
    },

    {
      quote:"The greatest deception men suffer is from their own opinions.", 

      person: "Leonardo da Vinci"
    },

    {
      quote: "Innovation distinguishes between a leader and a follower.", 

      person: "Steve Jobs"
    },

    {
      quote: "Iron rusts from disuse, stagnant water loses its purity and in cold weather becomes frozen, \n\
               even so does inaction sap the vigor of the mind.", 

     person: "Leonardo da Vinci"
    },

    {
      quote: "Simplicity is the ultimate sophistication.", 

      person: "Leonardo da Vinci"
    }
];

let count = 0;
const quoteButton = document.querySelector("#quoteButton");
const quoteDisplay = document.querySelector("#quoteDisplay");
const totalQuotes = quotes.length;

const displayQuote = () => {

  let currentCountNumber = getCurrentCountNumber();
  let quote = getQuote( currentCountNumber );

  let quoteData = quote.quote;
  let authorData = quote.person;

  displayQuoteDom(quoteDisplay, quoteData, authorData );
  count = increaseCountNumber(count, totalQuotes);

 };

const getCurrentCountNumber = () => count
const getQuote = (itemIndex) => quotes[itemIndex];
const displayQuoteDom = (target, quote, author ) => target.innerHTML = '<q>' + '<i>' + quote + '</i>' + '</q>' + '<br/>' + '<b>' + author  + '</b>';
const increaseCountNumber = (count, totalQuotes) => count === (totalQuotes - 1)  ? 0 : count+=1;

quoteButton.addEventListener('click', () => displayQuote() );
Willie Suggs
Willie Suggs
Courses Plus Student 5,879 Points

it's quote generator, so a user presses a button and a quote pops up in browser. Once I got it to work, when the second quote was generated it came back as undefined, thats when i noticed the misspelling. it works now, only problem is once I get to my last quote I have to hit the button twice before my quote list will start over.

Got it Willie Suggs, take a look at the script that I posted it does that. It goes through all the quotes and when it reaches the end it starts again from 0.

You can see it in action here: http://codepen.io/helmutgranda/live/3ca7f855aac5c85e8442f9b5f901222b

Enjoy!

Willie Suggs
Willie Suggs
Courses Plus Student 5,879 Points

wow, speaking from a beginners stand point thats some beautiful code. I'm going to try and break it down and figure out how it actually works. Question: In the increaseCountNumber function what did '?0:' mean, and is count === (totalQuotes - 1) like short hand for a conditional statement in an arrow function?

const increaseCountNumber = (count, totalQuotes) => count === (totalQuotes - 1) ?0: count +=1;

Willie Suggs, that is not specifically to arrow functions. That is a standard shot hand for if statements, since you were using the arrow function we can return the right value right away.

Willie Suggs
Willie Suggs
Courses Plus Student 5,879 Points

Ok... hope you won't mind me asking but, did you learn to code just using team tree house and or similar platforms? Helmut Granda

Willie Suggs
PLUS
Willie Suggs
Courses Plus Student 5,879 Points

Thanks guys! William Olojede storing every iteration of the loop in the array and then just accessing the array worked nice.

let getQuote = [];
let getPerson = [];
let count = 0;
const displayQuote = () => {

    for(let i =0; i < quotes.length; i++){
      getQuote.push(quotes[i].quote);
      getPerson.push(quotes[i].person);
  }
     if(count < quotes.length){ 
     quoteDisplay.innerHTML = '<q>' + '<i>' + getQuote[count] + '</i>' + '</q>' + '<br/>' + '<b>' + getPerson[count]  + '</b>';
     count = count + 1;
    }else{
        count = 0;
    }


 };
blake guyan
blake guyan
8,297 Points

hey can i steal the HTML so i can play with this?

Willie Suggs
PLUS
Willie Suggs
Courses Plus Student 5,879 Points

blake guyan sure!

<!DOCTYPE html>

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="http://code.jquery.com/jquery.js"></script>

        <link rel="stylesheet"
              href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>

        <link rel="stylesheet"
              href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"/>

        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">
        </script>
        <link href="quoteGenerator.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        <div class="heading">
            <h1>Powerful Quotes</h1>
            <p>That can change your life</p>
        </div>    



        <div class="quoteDiv">
            <p id="quoteDisplay"></p>
            <button type="button" id="quoteButton">Press For Words Of Wisdom</button>
        </div>   
        <script type="text/javascript" src="quoteGenerator.js"></script>
    </body>
</html>