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

Question

I'm building a random quote generator, when I click the 'get a quote button' it generates one of the quotes randomly, but after the first click it doesn't provide more sentences when clicked again.

here is my 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];
    }
} 

Can someone kindly check and advise?

Many thanks in advance

Answer 1

As someone has already pointed out, your rand value is not getting generated again. Since you call loopQuotes methods which doesn't have the logic of generating rand again.

Try

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

Answer 2

Try this way , because you have calling Random outside of function.

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

Answer 3

replace your code with below

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

It's because you are generating your random variable outside of your function. Whenever you put JavaScript into an HTML page, it gets run exactly once, and only the stuff inside function s is available to be run at a later time. Therefore, you should put your assignment to rand inside your function body:

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 fact, it makes no sense to loop since rand isn't changing, so you can get rid of the for loop and just keep what's inside. If you meant to generate a big, long quote pieced together from multiple quotes, you'll want to do something like this in which you put the rand generation inside the loop body and add to the innerHTML string instead of replacing it:

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

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

Firstly you need to generate numbers between 0 to length-1.

Secondly you dont need looping, if you plan to generate a number every time the "Get a Quote" div is clicked.

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