Javascript onclick Ereignis funktioniert nicht nach dem ersten Klick - zufällige Quote Generator

Question

Ich bin ein zufälliger Quote Generator, wenn ich auf die Schaltfläche "Get A Quote" klicken, es generiert eines der Anführungszeichen zufällig, aber nach dem ersten Klick Es bietet keine weiteren Sätze, wenn erneut darauf geklickt wird.

hier ist mein Code:

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

Kann jemand freundlicherweise überprüfen und beraten?

Vielen Dank im Voraus

Answer 1

Wie schon jemand bemerkt hat, wird Ihr rand Wert nicht wieder erzeugt zu werden. Seit dem Aufruf loopQuotes Methoden, die nicht die Logik der Generierung rand wieder hat.

Versuchen

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

Answer 2

auf diese Weise versuchen, da Sie Random außerhalb der Funktion aufgerufen haben.

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

Answer 3

Code ersetzen mit unter

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

Es ist, weil Sie Ihre Zufallsvariable generieren außerhalb Ihrer Funktion. Jedes Mal, wenn Sie JavaScript in eine HTML-Seite einfügen, wird es genau einmal ausgeführt, und nur das Zeug innerhalb von function ist verfügbar, um zu einem späteren Zeitpunkt ausgeführt zu werden. Daher sollten Sie Ihre Zuordnung zu rand in Ihrem Funktionskörper setzen:

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

In der Tat macht es keinen Sinn, Schleife, da rand ist nicht zu ändern, so dass Sie loswerden der for Schleife bekommen und nur halten, was Innerhalb. Wenn Sie ein großes, langes Zitat erstellen möchten, das aus mehreren Anführungszeichen zusammengesetzt ist, möchten Sie etwas tun, bei dem Sie die rand Generation in den Schleifenkörper einfügen und zur innerHTML Zeichenfolge hinzufügen, anstatt sie zu ersetzen:

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

Aktualisiert Fiddle - https://jsfiddle.net/3wuyo60p/

Zunächst müssen Sie Zahlen zwischen 0 bis Länge-1 zu erzeugen.

Zweitens brauchen Sie keine Schleife, wenn Sie planen, eine Zahl jedes Mal zu generieren, wenn das "Get a Quote" div geklickt wird.

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