我尝试了多种方法，谁能告诉我这个数组有啥问题？

Posted 2023-05-09

【中文标题】我尝试了多种方法，谁能告诉我这个数组有啥问题？

【英文标题】：I have tried multiple ways, Can anyone tell me what's wrong with this array?我尝试了多种方法，谁能告诉我这个数组有什么问题？

【发布时间】：2021-10-17 15:58:18

【问题描述】：

我正在尝试制作一个随机报价生成器，通过单击按钮生成报价。我认为我做的一切都是正确的，但是一旦点击了按钮，什么都没有发生。

这里是代码

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

【参考方案1】：

代码错误

函数调用应该在点击时使用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。它们必须相同。 您还可以将随机数生成逻辑移到函数内部，以便在用户每次单击按钮时生成新的随机数。当前随机数生成只发生一次，当用户点击按钮时该值不会更新

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>

【讨论】：

非常感谢您抽出宝贵时间帮助他人。它真的很有帮助。 :)

@heleni 尽管我最早提供了您需要的解决方案，但很遗憾看到您批准了在我之后发布的其他答案。

【参考方案2】：

在您的示例中，无需转义数组中的字符。如果您的数组值中有单引号'，则需要转义字符。 数组末尾有多余的,。 点击按钮时调用函数的方式错误。

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>

【讨论】：

嗨 Shree，我非常感谢您提供的这个解决方案，它在两分钟内解决了数周的困惑。谢谢你，谢谢你，谢谢你！！！如您所知，我对 js 还是很陌生，您是否有可能让我知道为什么您更改了 js 中的某些代码而不是我提供的功能？我需要为它写一份报告。

1.const 表示不会重新分配标识符。 let 是变量可能被重新分配的信号，例如循环中的计数器，或算法中的值交换（如果需要）。 2.将结果分配给变量，如果需要使用该变量，比整个过程更快地获得价值。 ....................

希望你能得到答案:)

我做到了。现在这很有意义。 :)

【参考方案3】：

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

应该是 list.length 而不是 list.lenght。

【讨论】：

天哪，我已经为此工作了几个月。谢谢。数组有什么问题吗？因为它仍然不起作用。再次感谢

【参考方案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>