[英]I have tried multiple ways, Can anyone tell me what's wrong with this array?
我正在尝试制作一个随机报价生成器,通过单击按钮生成报价。 我想我做的一切都是对的,但是一旦点击了按钮,什么也没有发生。
这是代码
HTML代码
<div class="quote-box">
<p id = "quote-generator"> this is where the quote will go </p>
<button class="btn" onclick="function newQuote()"> Next </button>
</div>
JS代码
var list = [
'/"Your mind will always believe what you tell it. Feed it faith. Feed it the truth. Feed it with love. /"',
'/"A problem is a chance for you to do your best./"',
'/"Learn how to be happy with what you have while you pursue all that you want./"',];`
const randomNumber = Math.floor(Math.random()*list.lenght);
function newQuote() {
document.getElementById("quotes-generator").innerHTML = list [randomNumber];`
}
代码错误
onclick="newQuote()"
而不是onclick="function newQuote()"
const randomNumber = Math.floor(Math.random() * list.length);
而不是const randomNumber = Math.floor(Math.random() * list.lenght);
quote-generator
,在脚本中是quotes-generator
。 它们必须相同。 var list = [ '/"Your mind will always believe what you tell it. Feed it faith. Feed it the truth. Feed it with love. /"', '/"A problem is a chance for you to do your best./"', '/"Learn how to be happy with what you have while you pursue all that you want./"', ]; function newQuote() { const randomNumber = Math.floor(Math.random() * list.length); document.getElementById("quote-generator").innerHTML = list[randomNumber]; }
<div class="quote-box"> <p id="quote-generator"> this is where the quote will go </p> <button class="btn" onclick="newQuote()"> Next </button> </div>
您的解决方案的最小表示将是
const list = [ '"Your mind will always believe what you tell it. Feed it faith. Feed it the truth. Feed it with love. "', '"A problem is a chance for you to do your best."', '"Learn how to be happy with what you have while you pursue all that you want."', ]; newQuote = () => document.getElementById("quote-generator").innerHTML = list[Math.floor(Math.random() * list.length)];
<div class="quote-box"> <p id="quote-generator"> this is where the quote will go </p> <button class="btn" onclick="newQuote()"> Next</button> </div>
const randomNumber = Math.floor(Math.random()*list.lenght);
它应该是 list.length 而不是 list.lenght。
'
需要转义字符。,
。 var list = ['"Your mind will always believe what you tell it. Feed it faith. Feed it the truth. Feed it with love. "', '"A problem is a chance for you to do your best."', '"Learn how to be happy with what you have while you pursue all that you want."'];; function newQuote() { let rnd = Math.floor(Math.random() * list.length); let rqt = list[rnd]; document.getElementById("quote-generator").innerHTML = rqt; }
<div class="quote-box"> <p id="quote-generator"> this is where the quote will go </p> <button class="btn" onclick="newQuote()"> Next </button> </div>
如果您想避免重复,最好将数组打乱一次,然后以循环方式将其呈现给用户:
/* Randomize array in-place using Durstenfeld shuffle algorithm */ function shuffleArray(array) { for (let i = array.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [array[i],array[j]] = [array[j],array[i]]; } } const list = [ '"Your mind will always believe what you tell it. Feed it faith. Feed it the truth. Feed it with love. "', '"A problem is a chance for you to do your best."', '"Learn how to be happy with what you have while you pursue all that you want."', ]; shuffleArray(list); list.n=-1; document.querySelector(".btn").onclick=newQuote; function newQuote(){ document.getElementById("quote-generator").innerHTML = list[++list.n%list.length]; } newQuote();
<div class="quote-box"> <p id="quote-generator"> this is where the quote will go </p> <button class="btn"> Next </button> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.