How do I make a random quote generator not repeat quotes

user_3321460 0
Viewed 246

I've searched the site for answers but the one's that come up aren't similar/specific to the code that I have written. I don't know how to modify the code so that the quotes don't repeat when the user presses a button to generate another quote.

var quotes = [
{
    quote: "\"Don't just exist, live\""
},
{
    quote: "\"Try to be a rainbow in someone's cloud\""
},
{
    quote: "\"Prove them wrong\""
},
{
    quote: "\"Find reasons to smile\""
},
{
    quote: "\"You get what you give\""
}
]

var quotebtn = document.getElementById('quote-btn');
var quote = document.querySelector('.quote');

quotebtn.addEventListener('click', () => {
let random = Math.floor(Math.random() * quotes.length);

quote.innerHTML = quotes[random].quote;
})
random javascript
4 Answers

If the displayed is no longer important and can be deleted. You can do it easily with an array splice.

example:

var quotes = [
    {
        quote: "\"Don't just exist, live\""
    },
    {
        quote: "\"Try to be a rainbow in someone's cloud\""
    },
    {
        quote: "\"Prove them wrong\""
    },
    {
        quote: "\"Find reasons to smile\""
    },
    {
        quote: "\"You get what you give\""
    }
    ]
    
    var quotebtn = document.getElementById('quote-btn');
    var quote = document.querySelector('.quote');
    
    quotebtn.addEventListener('click', () => {
    let random = Math.floor(Math.random() * quotes.length);
    
    quote.innerHTML = quotes[random].quote;
    quotes.splice(random, 1); // Trim one from the specified index.
    })
user_74874200

This should work for you

quotebtn.addEventListener('click', () => {
    if(quotes.length) {
        
        let random = Math.floor(Math.random() * quotes.length);
        quote.innerHTML = quotes[random].quote;
        quotes.splice(random, 1);
        
    } else {
        quote.innerHTML = "No more quotes!";
    }
})

quotes.splice(random, 1) removes quotes already presented from the array, preventing it from repeating

Once quotes is emptied, the No more quotes! message can be displayed!

user_61245280

You can make another array with the same length as the quotes array and initialize it with zeros. When quote is generated set the new array at the same index as the quote to one which will mean that the quote is already generated. Next time when you generate quote check first if quote is already generated and if it is generate again.

user_85517790 

var quotes = [{
    quote: "\"Don't just exist, live\""
},{
    quote: "\"Try to be a rainbow in someone's cloud\""
},{
    quote: "\"Prove them wrong\""
},{
    quote: "\"Find reasons to smile\""
},{
    quote: "\"You get what you give\""
}];
quotes.sort(() => Math.random() - 0.5);
var quotebtn = document.getElementById('quote-btn');
var quote = document.querySelector('.quote');
var actualQuote = 0;
quotebtn.addEventListener('click', () => {
    if(actualQuote>=quotes.length){
        quote.innerHTML = "No more quotes";
    } else {
        quote.innerHTML = quotes[actualQuote % quotes.length].quote;
        actualQuote++;
    }
});
<button id="quote-btn">Quote</button><br>
<span class="quote"></span>

I just shuffle the quotes at start. At click I display the first, and the next one, etc. If you want it not to stop after last one just remove the condition and it will cycle trough all. So after the last it will start from the beginning.

user_54929800
Related