I made a simple quote slider that changes the sentence on the screen randomly upon each click, but I don't want it to show the same quote twice in a row. How can I exclude the current quote from the Math.random algorithm and make the slider show any other quote upon each click?
(I don't want each quote to be shown only once, I just want to prevent the slider to show the same one in a row)
HTML:
<div class="container" onclick="changequote()">
<div class="quote">Sentence 1</div>
<div class="quote">Sentence 2</div>
<div class="quote">Sentence 3</div>
</div>
<script>window.onload = changequote()</script>
JS:
function changequote() {
var random = Math.floor(Math.random() * $('.quote').length);
$('.quote').hide().eq(random).fadeTo(500, 1);
}
CSS:
.quote {
display: none;
}
You could toggle a class to track the current quote. Then randomly pick from the quotes that are :not(.current).
Also I moved the javascript to the javascript section, which really helps for maintainability. Nothing like pouring through the .js file when debugging just to find out the issue is originating from the html.
function changequote() {
let $quotes = $('.quote:not(.current)');
$('.quote').removeClass('current').hide(); //reset all quotes
$quotes //pick from all quotes except the previously selected one
.eq(Math.floor(Math.random() * $quotes.length))
.addClass('current')
.fadeIn();
}
$('.container').on('click', changequote).click(); //click will initialize on page load.quote{
cursor: pointer;
display: none;}<div class="container">
<div class="quote">Sentence 1</div>
<div class="quote">Sentence 2</div>
<div class="quote">Sentence 3</div>
<div class="quote">Sentence 4</div>
<div class="quote">Sentence 5</div>
<div class="quote">Sentence 6</div>
<div class="quote">Sentence 7</div>
<div class="quote">Sentence 8</div>
<div class="quote">Sentence 9</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>Just save the index into a global variable, using closures
const changeQuote = (() => {
let lastSelectedIndex;
return function() {
let random = Math.floor(Math.random() * $('.quote').length);
while(true)
{
random = Math.floor(Math.random() * $('.quote').length);
if(random !== lastSelectedIndex) break;
}
$('.quote').eq(lastSelectedIndex).hide();
$('.quote').eq(random).fadeIn(500);
lastSelectedIndex = random;
}
})();
EDIT: Here is a running example
const changeQuote = (() => {
let lastSelectedIndex;
return function() {
let random = Math.floor(Math.random() * $('.quote').length);
while(true)
{
random = Math.floor(Math.random() * $('.quote').length);
if(random !== lastSelectedIndex) break;
}
$('.quote').eq(lastSelectedIndex).hide();
$('.quote').eq(random).fadeIn(500);
lastSelectedIndex = random;
}
})();.quote {
display: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="quote">Sentence 1</div>
<div class="quote">Sentence 2</div>
<div class="quote">Sentence 3</div>
<button onclick="changeQuote()">Show Random Quote</button>