Javascript Random Phrase From List

Question

For my website, I am trying to make a button where every time a press a button a different quote comes up. I have made a separate document to make this. I am not very experienced at javascript, so please help. This is my HTML:

    <button">Change Quote</button>
    <p id="test"></p>

I am aiming to give each quote a number value from one to ten so its random. Also, when I click the button the p changes. Thanks.

EDIT: Is there any way to have it cycle through? For instance, once I get the first quote, can it go onto the second?

new JS:

    var quotes = [
  "I am Bob",
  "I am smart",
  "I am independent",
  "I am bringing change",
];

document.getElementById("changeQuote").addEventListener("click", function() {
var q = quotes[ Math.floor( Math.random() * quotes.length ) ];
document.getElementById("test").innerHTML = q;

Thanks again.

Where are the quotes stored? If you put them in an array in your JS file it would be trivial to select one from the array at [random](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random) each time a button is clicked. — nnnnnn, Jun 21 '15 at 08:24
1. [Create an array of quotes.](http://stackoverflow.com/questions/3746725/create-a-javascript-array-containing-1-n) 2. [Add a click handler](http://stackoverflow.com/questions/6445207/adding-event-listeners-on-elements-javascript). 3. [Select a random element from the array.](http://stackoverflow.com/questions/5915096/get-random-item-from-javascript-array) 4. [Update the content of the target element.](http://stackoverflow.com/questions/121817/how-do-i-replace-text-inside-a-div-element#answer-121824) — Ram, Jun 21 '15 at 08:30

score 2 · Accepted Answer · answered Jun 21 '15 at 08:30

As mentioned in my comment, store the quotes in an array, then add a click handler that selects at random from that array.

Give your button an id, so it can easily be selected from JS:

<button id="changeQuote">Change Quote</button>

Then something like this, using the Math.random() method:

var quotes = [
      "The quick brown fox jumps over the lazy dog.",
      "Look out! There are llamas!",
      "No, really, don't get up.",
      "Whatever",
      "Etc."    
    ];

document.getElementById("changeQuote").addEventListener("click", function() {
    var q = quotes[ Math.floor( Math.random() * quotes.length ) ];
    document.getElementById("test").innerHTML = q;     
});

Demo: http://jsfiddle.net/9pqqmnrs/

Javascript Random Phrase From List

2 Answers2