Show a random div upon click except the current one

user_15182848 0
Viewed 132

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;
}
html jquery javascript
2 Answers

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>

user_96508030

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>

user_173448990
Related