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来解决这个问题之后，我意识到randomize按钮实际上是在重复数组中的元素，这就是为什么需要额外的单击才能到达下一个引用。 Math.random()不能避免重复数字。现在，您可以通过继续按该按钮并观察到使用了相同的数字来看到它。

看看this的答案，看看如何避免重复索引。

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>

Answer 3

我没有意识到，现在说得通...谢谢！

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

3 个答案: