Генерация и циклическая обработка массива случайных чисел с помощью кнопки Далее. - PullRequest
Новая
       11

Генерация и циклическая обработка массива случайных чисел с помощью кнопки Далее.

0 голосов
/ 20 июня 2019

Итак, у меня есть переменная массива JS со строковыми значениями. Это генерирует цитаты при каждом нажатии кнопки. Я заметил, что после прохождения всех кавычек, есть последний щелчок, который ничего не выводит. Поэтому я должен нажать на кнопку второй раз, чтобы снова генерировать цитаты. Любая идея, как будто это можно решить?

Большое спасибо 

    <div id="enQuoteDisplay">
        <!--English quotes display here-->
    </div>

    <div align="left">
    <button onclick="newQuoteEn()">Next</button>
    </div>

    <script src="translator.js"></script>

#enQuoteDisplay {
    position: absolute;
    top: 400%;
    left: 5%;
    font-size: 30px;
}

button {
    position: absolute; 
    left: 5%;
    top: 1000%;
}

var quotesEn = [
"Hello, how are you?",
"I love you.",
"When does the bus come?",
"Where is the nearest market?",
"What time is it?",
"I don't/didn't understand.",
"I need/want to go home.",
"Dinner was delicious.",
"Congratulations!",
"Happy New Year!",
"I am cold.",
"The battery is dead.",
"We are going to the beach.",
"Let's dance!",
"I sent you an email.",
"You look good."
]

function newQuoteEn() {
    var randomNumber = Math.floor(Math.random() * (quotesEn.length));
    document.getElementById('enQuoteDisplay').innerHTML = quotesEn[randomNumber];
}

Одна цитата при каждом нажатии кнопки без перерыва.

Ответы [ 3 ]

1 голос
/ 20 июня 2019

Вы генерируете random чисел, но в вашем случае вы хотите генерировать случайные и уникальные числа в указанном диапазоне. Итак, вам нужно что-то вроде этого: 

let uniqueRandomGenerator = n => {
  let set = new Set()  // use Set to remove any duplicates as you keep adding #
  while (set.size < n) set.add(Math.floor(Math.random() * n)) // keep adding #
  return Array.from(set) // return an array from the Set
}

Что гарантирует, что у вас не будет повторяющихся "random" номеров, сгенерированных в указанном диапазоне (который предполагается 0 to n). С учетом сказанного ваш код будет выглядеть примерно так: 

var quotesEn = [ "Hello, how are you?", "I love you.", "When does the bus come?", "Where is the nearest market?", "What time is it?", "I don't/didn't understand.", "I need/want to go home.", "Dinner was delicious.", "Congratulations!", "Happy New Year!", "I am cold.", "The battery is dead.", "We are going to the beach.", "Let's dance!", "I sent you an email.", "You look good." ]

let uniqueRandomGenerator = n => {
  let set = new Set()
  while (set.size < n) set.add(Math.floor(Math.random() * n))
  return Array.from(set)
}

let randomQuotes = uniqueRandomGenerator(quotesEn.length), last = 0

function newQuoteEn() {
  document.getElementById('enQuoteDisplay').innerHTML = quotesEn[randomQuotes[last]];
  last = last == randomQuotes.length - 1 ? 0 : last + 1
}
<div id="enQuoteDisplay">
  <!--English quotes display here-->
</div>

<div align="left">
  <button onclick="newQuoteEn()">Next</button>
</div>

<script src="translator.js"></script>

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

Более простой подход заключается в использовании sort с Math.random, с помощью которого randomize ваш начальный массив: 

var quotesEn = [ "Hello, how are you?", "I love you.", "When does the bus come?", "Where is the nearest market?", "What time is it?", "I don't/didn't understand.", "I need/want to go home.", "Dinner was delicious.", "Congratulations!", "Happy New Year!", "I am cold.", "The battery is dead.", "We are going to the beach.", "Let's dance!", "I sent you an email.", "You look good." ]

let randomizeValues = arr => arr.sort((a, b) => 0.5 - Math.random());

let randomQuotes = randomizeValues(quotesEn), last = 0

function newQuoteEn() {
  document.getElementById('enQuoteDisplay').innerHTML = randomQuotes[last];
  last = last == randomQuotes.length - 1 ? 0 : last + 1
}
<div id="enQuoteDisplay">
  <!--English quotes display here-->
</div>

<div align="left">
  <button onclick="newQuoteEn()">Next</button>
</div>

<script src="translator.js"></script>
1 голос
/ 20 июня 2019

Посмотрев на эту проблему, создав codepen , я понял, что кнопка randomize фактически повторяет элементы в массиве, и поэтому для перехода к следующей цитате необходим дополнительный щелчок. Math.random() не защищает от повторяющихся чисел. Теперь вы можете увидеть это, продолжая нажимать кнопку и наблюдая, что используется тот же номер.

Посмотрите на этот ответ, чтобы увидеть, как можно избежать повторения индексов.

0 голосов
/ 21 июня 2019

Я не осознавал этого, теперь имеет смысл ... Спасибо !!

...