使用 Next 按钮生成和循环随机数数组

Question

所以我有这个带有字符串值的 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];
}

每个按钮点击一个引号，没有中断。

Answer 1

通过创建 codepen 查看此问题后，我意识到随机化按钮实际上是重复数组中的元素，这就是为什么需要额外单击才能转到下一个引号的原因。 Math.random() 不防止重复数字。您现在可以通过继续按下按钮并观察是否使用了相同的数字来看到这一点。

查看答案，了解如何避免重复索引。

Answer 2

您正在生成 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>

使用 Next 按钮生成和循环随机数数组

Generating and Looping through random numbers array with Next button

javascript

arrays

click

button