Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

Jeremy Coleman
Jeremy Coleman
5,449 Points

Phrase or Quote on Refresh?

I know what I want, not sure how to code it or what to look for. Basically, I want for example 10 phrases or quotes but only 1 of those 10 will randomly appear on the website. It changes upon refresh.

Bonus to this would to add a button just the phrase refreshes and not the entire website. Can anyone point me in the right direction for this? Thank you!

2 Answers

Three hits for this. Do not want to give you to much.

1.You are going to need a randoms number. (Math.random()) 2.Some way to store the quotes in your code and a way to get them with a number. 3.And a function combining those two elements and to call the function when the button gets pressed.

Let me know if you want more hints but see what you can come up with.

Jeremy Coleman
Jeremy Coleman
5,449 Points

I got the whole random number thing down, I am just lost on how to get the numbers in the array to display a quote in html. Let alone get a button attached to it. As far as random number something like this

function randomQuotes() {
    return (Math.floor(Math.random() * 1000) + 1);
}

Kind of bad with JavaScript but I am pretty sure this is going to fail regardless however, there will be 1000 + phrases and/or quotes.

You will want to look into modifying the DOM with javascript. You can do this really easy with jQuery but pure javascript is just as simple.

How this works is you have a <p> element on your page, then you can set the inner html (<p>"This"</p>) with java script as though you are setting any other variable.

You can get your element that you want on the quote text by using its id check out the MDN and see what you can get out of that. document.getElementById

For the button you want to set add a click event listener. That will bind a function to an user event. In this case a click. You can use the same 'getElementById' to get the element that you will click. 'addEventListener' take the event as the first argument, and a function that you place what you want to happen in the second.

buttonElement.addEventListener('click', function(){
     //code here
}):

Check out addEventListener

Nice job on where thought this yourself. Take that classes are alway quick but you always understand it to a greater depth when you work it out.

Jason Desiderio
Jason Desiderio
21,811 Points

Jeremy Coleman - Here is a video lesson describing pretty much what you are looking for. It chooses a random word (which you can change to phrases) from an array and displays it on the page when the button is pressed. You'll be able to modify it to run on page load as well as on the button click event.

https://teamtreehouse.com/library/treehouse-club-mash/mash-javascript/mash-choice-and-random-number-functions

Hope this helps!

Jeremy Coleman
Jeremy Coleman
5,449 Points

Thank you Jason I'll check it out!