使用“下一步”按钮生成和循环遍历随机数数组

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

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

正如您现在所看到的，不需要双击，因为永远不会有两次相同的索引等情况。

一种更简单的方法是使用带有Math.random的sort来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>

Answer 2

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

看看

这个答案，看看如何避免重复索引。