Question

我正在构建一个随机引用生成器，当我单击“获取引用按钮”时，它会随机生成一个引号，但在第一次单击后，再次单击时不会提供更多的句子。

这是我的代码：

HTML：

<h1>Random Quotes</h1>
<p>Press The below button to read a random quote</p>

<p id="demo"></p>
<div class="button" onclick="loopQuotes()">Get a quote</div>
<script type="text/javascript">

</script>

的javascript：

var quotes = [("Quote 1"), ('quote 2'), ('quote 3'), ('quote 4')];

var length = quotes.length;
var rand = Math.round(Math.random() * (length - 1));

function loopQuotes(){
    for (var i = 0; i < quotes.length; i++ ) {
        document.getElementById('demo').innerHTML = quotes[rand];
    }
}

有人可以检查并提出建议吗？

非常感谢提前

Answer 1

正如有人已经指出的那样，您的rand值不会再次生成。由于您调用的loopQuotes方法没有再次生成rand的逻辑。

尝试

function loopQuotes()
{
  var rand = Math.round(Math.random() * (length - 1));
  document.getElementById('demo').innerHTML = quotes[rand];
}

Answer 2

尝试这种方式，因为您在函数之外调用了Random。

function loopQuotes(){
    var length = quotes.length;
    var rand = Math.round(Math.random() * (length - 1));
    document.getElementById('demo').innerHTML = quotes[rand];
}

Answer 3

用下面的代码替换

var quotes = ["Quote 1", 'quote 2', 'quote 3', 'quote 4'];
var length = quotes.length;
function loopQuotes()
{
    for (var i = 0; i < quotes.length; i++ ) 
    {
        var rand = Math.round(Math.random() * (length - 1));
         document.getElementById('demo').innerHTML = quotes[rand];
    }
}

Answer 4

这是因为你在函数之外生成随机变量。每当您将JavaScript放入HTML页面时，它只运行一次，并且只有function中的内容可以在以后运行。因此，您应该将您的作业放在函数体内rand：

function loopQuotes(){
    var rand = Math.round(Math.random() * (quotes.length - 1));
    for (var i = 0; i < quotes.length; i++ ) {
        document.getElementById('demo').innerHTML = quotes[rand];
    }
}

事实上，循环是没有意义的，因为rand没有改变，所以你可以摆脱for循环并保持内部的内容。如果你想生成一个从多个引号拼凑在一起的大而长的引用，你会想要做一些像这样的事情，你将rand代放在循环体内并添加到innerHTML字符串而不是取代它：

function loopQuotes(){
    document.getElementById('demo').innerHTML = "";
    var length = quotes.length;
    for (var i = 0; i < length; i++ ) {
        var rand = Math.round(Math.random() * (quotes.length - 1));
        document.getElementById('demo').innerHTML += quotes[rand];
    }
}

Answer 5

更新了小提琴 - https://jsfiddle.net/3wuyo60p/

首先，您需要生成0到length-1之间的数字。

其次你不需要循环，如果你计划每次生成一个数字＆＃34;获取报价＆＃34;单击div。

<script type="text/javascript">
var quotes = [("Quote 1"), ('quote 2'), ('quote 3'), ('quote 4')];

function loopQuotes(){ 
var length = quotes.length; 
var max = quotes.length - 1;
var min = 0;
var rand = Math.round(Math.random() * (max - min) + min );

//console.log(rand);
document.getElementById('demo').innerHTML = quotes[rand]; 

}
</script>

第一次点击后，Javascript onclick事件无效 - 随机引用生成器

5 个答案: