我嘗試了多種方法，誰能告訴我這個數組有什么問題？

Question

我正在嘗試制作一個隨機報價生成器，通過單擊按鈕生成報價。 我想我做的一切都是對的，但是一旦點擊了按鈕，什么也沒有發生。

這是代碼

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];`
}

Answer 1

代碼錯誤

• Function 調用應該在單擊onclick="newQuote()"而不是onclick="function newQuote()"
• 取列表長度生成隨機數時出現拼寫錯誤。 它應該是const randomNumber = Math.floor(Math.random() * list.length); 而不是const randomNumber = Math.floor(Math.random() * list.lenght);
• 在 HTML 中指定的 ID 是quote-generator ，在腳本中是quotes-generator 。 它們必須相同。
• 您還可以將隨機數生成邏輯移至 function 內部，以便在用戶每次單擊該按鈕時生成新的隨機數。 當前的隨機數生成只發生一次，當用戶單擊按鈕時該值不會更新

 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>

Answer 2

const randomNumber = Math.floor(Math.random()*list.lenght);

它應該是 list.length 而不是 list.lenght。

Answer 3

1. 在您的示例中，無需轉義數組中的字符。 如果數組值中的單引號'需要轉義字符。
2. 數組末尾有額外的, 。
3. 單擊按鈕時調用 function 的方式錯誤。

 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>

Answer 4

如果您想避免重復，最好將數組打亂一次，然后以循環方式將其呈現給用戶：

 /* 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>