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

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

您正在生成随机数字，但在您的情况下，您希望生成指定范围内的随机且唯一数字。所以你需要这样的东西:

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
}

这保证了在指定范围内(假设为0 到 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 来随机初始数组:

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>