JavaScript - Loop through non-repeating values displaying only one at a time

Question

I have this page with a button the user can click on to generate a random quote.

I started with something like this:

        function randomize() {
            var myrandom = Math.round(Math.random() * 4)
            if (myrandom == 0)
                document.getElementById("randomQuote").innerHTML = "Quote 01"
            else if (myrandom == 1)
                document.getElementById("randomQuote").innerHTML = "Quote 02"
            else if (myrandom == 2)
                document.getElementById("randomQuote").innerHTML = "Quote 03"
            else if (myrandom == 3)
                document.getElementById("randomQuote").innerHTML = "Quote 04"
            else if (myrandom == 4)
                document.getElementById("randomQuote").innerHTML = "Quote 05"
        }

    <p><button onclick="randomize()" type="button">Random Quote</button></p>
    <p id="randomQuote"></p>

But since I don't want to repeat the quotes (at least until all of them have been showed once), and after looking at this post I tried the following:

        function randomize() {
            var quotes = ["Quote 01", "Quote 02", "Quote 03", "Quote 04", "Quote 05"],
                ranQuotes = [],
                i = quotes.length,
                j = 0;

            while (i--) {
                j = Math.floor(Math.random() * (i + 1));
                ranQuotes.push(quotes[j]);
                quotes.splice(j, 1);
            }
        document.getElementById("randomQuote").innerHTML = ranQuotes;
        }

    <p><button onclick="randomize()" type="button">Random Quote</button></p>
    <p id="randomQuote"></p>

But this solution, along with the alternative solutions on the same post, randomizes and displays all the quotes. I would like to display only one at a time.

How can I do that?

score 1 · Accepted Answer · answered Oct 14 '18 at 08:24

Keep a persistent array of the original quotes, and an array of the yet-unused quotes. Every time the button is clicked, repopulate the unused quotes if it's empty, then remove a random element from it and display:

const p = document.getElementById("randomQuote");
const origQuotes = ["Quote 01", "Quote 02", "Quote 03", "Quote 04", "Quote 05"];
let remainingQuotes = [];
function randomize() {
  if (remainingQuotes.length === 0) remainingQuotes = origQuotes.slice();
  const { length } = remainingQuotes;
  const [quote] = remainingQuotes.splice(Math.floor(Math.random() * length), 1);
  p.textContent = quote;
}

<p><button onclick="randomize()" type="button">Random Quote</button></p>
<p id="randomQuote"></p>

Do note that unless you're deliberately inserting HTML markup, you should assign to .textContent, not .innerHTML - it's safer, faster, and more predictable.

If you use the Fisher-Yates (and Knuth) algorithm you can make the shuffling of the array in place and quicker. See here for a great visualisation of the algorithm: https://bost.ocks.org/mike/shuffle/ — Carsten Massmann, Oct 14 '18 at 09:28

JavaScript - Loop through non-repeating values displaying only one at a time

1 Answers1