我正试图使一个随机报价生成器,通过点击一个按钮生成一个报价。我想我做的一切都是对的,但是一旦按钮被点击,什么也没有发生。
代码
<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>
<<p>JS代码/strong>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);
- Id在HTML中指定为
quote-generator
,在script中指定为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>
- 在您的示例中,不需要在数组中转义字符。如果在你的数组值里面单引号
'
,你需要转义字符。 - 数组结束,你有额外的
,
。 点击按钮调用函数的方式错误。
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>
const randomNumber = Math.floor(Math.random()*list.lenght);
应该是list。长度和非list. Length .
如果希望避免重复,最好将数组洗牌一次,然后以循环的方式呈现给用户:
/* 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>