Javascript onclick 事件在第一次点击后不起作用 - 随机报价生成器

Question

我正在构建一个随机引语生成器，当我点击 'get a quote button' 它会随机生成一个引语，但在第一次点击后再次点击时它不会提供更多句子。

h这是我的代码：

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 页面时，它只会得到一次运行，并且只有 functions 中的内容可以在以后成为运行时间。因此，您应该将对 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

已更新 Fiddle - https://jsfiddle.net/3wuyo60p/

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

其次，如果您计划在每次单击 "Get a Quote" 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 事件在第一次点击后不起作用 - 随机报价生成器

Javascript onclick event doesn't work after the first click - random quote generator

html

javascript

mouseevent

dom-events