[英]Generating and Looping through random numbers array with Next button
So I have this JS array variable with string values.所以我有这个带有字符串值的 JS 数组变量。 This generates quotes at each button click.这会在每次单击按钮时生成引号。 I noticed that after going through all quotes, there's one last click that outputs nothing.我注意到在浏览完所有报价后,最后一次点击没有任何输出。 So I have to click the button a second time to generate quotes again.所以我必须再次单击该按钮以再次生成报价。 Any idea as if it's possible to solve this?任何想法好像有可能解决这个问题?
Much thanks非常感谢
<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];
}
One quote at each button click with no interruption.每次单击按钮时引用一个引号,不会中断。
After looking at this issue by creating a codepen I realized that the randomize button is actually repeating elements in the array and that's why an extra click is needed to get to the next quote. 通过创建代码笔来解决这个问题之后,我意识到随机按钮实际上是在重复数组中的元素,这就是为什么需要额外的单击才能到达下一个引用。 Math.random()
does not protect from repeating numbers. Math.random()
不能防止重复数字。 You can now see this by continuing to press the button and observing that the same number is used. 现在,您可以通过继续按下按钮并观察使用相同的数字来查看此信息。
Take a look at this answer to see how you can avoid repeating indexes. 看一下这个答案,看看如何避免重复索引。
You are generating random
numbers but in your case you want to generate random and unique numbers in a specified range. 您正在生成random
数,但是要生成指定范围内的随机数和唯一数。 So you need something like this: 所以你需要这样的东西:
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
}
Which guarantees you would not have duplicate "random"
numbers generated in the specified range (which is assumed to be 0 to n
). 这保证了您不会在指定范围内(假定为0 to n
)生成重复的"random"
数字。 With being said your code would look something among these lines: 话虽这么说,您的代码在以下几行中看起来会是:
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>
As you can see now there is no double click needed since there never is a case where you have same index twice etc. 如您现在所见,不需要双击,因为永远不会出现两次相同索引的情况。
A simpler approach would be to use a sort
with Math.random
via which to randomize
your initial array: 一种更简单的方法是对Math.random
使用sort
,通过该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>
我没有意识到,现在有意义...谢谢!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.