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 trialWillie Suggs
Courses Plus Student 5,879 Pointswhy 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();
});
Helmut Granda
10,343 PointsHey 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
Courses Plus Student 5,879 PointsHelmut Granda, thanks for the advice and insight, it's highly appreciated!
5 Answers
William Olojede
Courses Plus Student 2,752 PointsHello 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
8,297 Pointsthats 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
Courses Plus Student 5,879 Pointsblake guyan I wanted to do it how you mentioned it but couldn't figure it out.
Helmut Granda
10,343 PointsI 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
Courses Plus Student 5,879 Pointsit'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.
Helmut Granda
10,343 PointsGot 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
Courses Plus Student 5,879 Pointswow, 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;
Helmut Granda
10,343 PointsWillie 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
Courses Plus Student 5,879 PointsOk... 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
Courses Plus Student 5,879 PointsThanks 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
8,297 Pointshey can i steal the HTML so i can play with this?
Willie Suggs
Courses Plus Student 5,879 Pointsblake 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>
blake guyan
8,297 Pointsblake guyan
8,297 Pointsi 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.