How to compare Math.random() method generated current value with previous value

Question

I am new to programming and recently started learning JavaScript. I made a little program that randomly generate quotes. Currently the program takes quotes from an array by using Math.random() method. But some times randomly generated number is same as before and quote doesn't change.

What I want is that once a quote is generated it should not show again till user see 7 different quotes. How I can achieve this by using pure JavaScript? (See JSFiddle demo)

If you know multiple solutions please share all if it is possible.

Here is my code:

<body>
    <h1>Random Quotes Generator</h1>
    <p>Click <strong>Generate</strong> button to see quotes.</p>
    <button>Generate!</button>
    <script src="script.js"></script>
</body>

var heading = document.querySelector("h1");
var paragraph = document.querySelector("p");
var button = document.querySelector("button");
var randomQuotes = [
    "I am 1st quote.",
    "I am 2nd quote.",
    "I am 3rd quote.",
    "I am 4th quote.",
    "I am 5th quote",
    "I am 6th quote.",
    "I am 7th quote.",
    "I am 8th quote.",
    "I am 9th quote.",
    "I am 10th quote."
];

var generateQuote = function() {

   paragraph.innerHTML = randomQuotes[Math.floor(Math.random() * 10)];

}

button.onclick = generateQuote;

[**Duplicate of this question**](http://stackoverflow.com/questions/6625551/math-random-number-without-repeating-a-previous-number), Jamshaid-Ahmed you'll find your answer there. (Accidentally dupe-hammered with the wrong question.) — T.J. Crowder, Feb 16 '16 at 15:00

score 0 · Answer 1 · answered Feb 16 '16 at 15:02

I would save a list of 7 previous quotes, and make sure the current one isn't in that list. updated code:

var heading = document.querySelector("h1");
var paragraph = document.querySelector("p");
var button = document.querySelector("button");
var randomQuotes = [
    "I am 1st quote.",
    "I am 2nd quote.",
    "I am 3rd quote.",
    "I am 4th quote.",
    "I am 5th quote.",
    "I am 6th quote.",
    "I am 7th quote.",
    "I am 8th quote.",
    "I am 9th quote.",
    "I am 10th quote."
];
var previousQuotes = [];

var generateQuote = function() {
    var quoteNumber = Math.floor(Math.random() * 10);
    if (previousQuotes.length > 6) {
        previousQuotes.shift();
    }
    while (previousQuotes.indexOf(quoteNumber) != -1) {
       quoteNumber = Math.floor(Math.random() * 10);
    }
    previousQuotes.push(quoteNumber);
    paragraph.innerHTML = randomQuotes[quoteNumber];
}

button.onclick = generateQuote;

<body>
    <h1>Random Quotes Generator</h1>
    <p>Click <strong>Generate</strong> button to see quotes.</p>
    <button>Generate!</button>
    <script src="script.js"></script>
</body>

score 0 · Answer 2 · answered Feb 16 '16 at 15:12

You can save the previosly showed quotes in an array and check that the next random generated number is not there:

var generateQuote = function() {
    var quoteToShow = Math.floor(Math.random() * 10);
    while(last7quotes.indexOf(quoteToShow) > 0){
        quoteToShow = Math.floor(Math.random() * 10);
    }
    last7quotes.push(quoteToShow);
    if(last7quotes.length > 7){
        last7quotes.splice(0,1);
    }
    paragraph.innerHTML = randomQuotes[quoteToShow];    
}

See fiddle

score 0 · Accepted Answer · answered Feb 16 '16 at 15:28

The shortest approach is to splice the selected item from the array and push it to the end. Random should be between 0 and 2. This saves the last 7 items from selection.

var paragraph = document.querySelector("p"),
    button = document.querySelector("button"),
    randomQuotes = ["I am 1st quote.", "I am 2nd quote.", "I am 3rd quote.", "I am 4th quote.", "I am 5th quote.", "I am 6th quote.", "I am 7th quote.", "I am 8th quote.", "I am 9th quote.", "I am 10th quote."],
    generateQuote = function () {
        var quote = randomQuotes.splice(Math.random() * 3 | 0, 1)[0];
        randomQuotes.push(quote);
        paragraph.innerHTML = quote;
    }
button.onclick = generateQuote;

<button>Generate!</button>
<p></p>

Thanks. It is really shortest and efficient approach. But what is the point of using this " | 0 " in calculation of index? — Jamshaid-Ahmed, Feb 18 '16 at 13:23
it is a bitwise or with 0, or a short way of casting the number to integer. — Nina Scholz, Feb 18 '16 at 13:25

How to compare Math.random() method generated current value with previous value

3 Answers3