第一次點擊 - 隨機報價生成器後，Javascript onclick事件不起作用

我正在構建一個隨機報價生成器，當我點擊「獲取報價按鈕」時，它隨機生成一個報價，但在第一次點擊它再次點擊時不會提供更多的句子。第一次點擊 - 隨機報價生成器後，Javascript onclick事件不起作用

這裏是我的代碼：

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

有人可以查收和建議？

提前

來源

2016-03-28 João Mateus

您只生成一個隨機數，它是沒有意義的被循環.... – epascarello

你應該把'變種蘭特= Math.round（的Math.random（）*（長度 - 1））; 'into'loopQuotes（）'body – kasynych

你可以寫'i John

正如有人已經指出，非常感謝，是沒有得到再次生成您的rand值。由於您再次調用loopQuotes方法，該方法不具有生成rand的邏輯。

嘗試

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

來源

2016-03-28 14:15:52 gurvinder372

它適合隊友，非常感謝@ gurvinder372！ –

試試這個辦法，因爲你已經調用Random之外的功能。

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

來源

2016-03-28 14:16:31 7urkm3n

下面

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

來源

2016-03-28 14:18:32 shreyansh

這是因爲你在你的函數之外產生的隨機變量代替你的代碼。無論何時將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]; 
    } 
}

來源

2016-03-28 14:20:08 TheHansinator

謝謝@ Compynerd255很好的解釋！ –

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

首先，你需要生成0之間的數字長度-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>

來源

2016-03-28 14:20:36 koolhuman

第一次點擊 - 隨機報價生成器後，Javascript onclick事件不起作用

回答

相關問題