JavaScript - циклически перебирайте неповторяющиеся значения, отображая только по одному - PullRequest
Новая
       26

JavaScript - циклически перебирайте неповторяющиеся значения, отображая только по одному

0 голосов
/ 14 октября 2018

У меня есть эта страница с кнопкой, на которую пользователь может нажать, чтобы сгенерировать случайную цитату.

Я начал примерно так: 

        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>

Но так как я не хочу повторять кавычки (по крайней мере, пока все они не будут показаны один раз), и после просмотра этоpost Я попробовал следующее: 

        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>

Но это решение, наряду с альтернативными решениями в том же посте, рандомизирует и отображает все цитаты.Я хотел бы отображать только по одному за раз.

Как я могу это сделать?

1 Ответ

0 голосов
/ 14 октября 2018

Сохраните постоянный массив исходных кавычек и массив еще не использованных кавычек.Каждый раз, когда нажимается кнопка, заполняйте неиспользуемые кавычки, если она пустая, затем удаляйте из нее случайный элемент и отображайте: 

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>

Обратите внимание, что если вы не намеренно вставляете HTML-разметку, вам следует назначить .textContent, а не .innerHTML - это безопаснее, быстрее и болеепредсказуемы.

...