Show a random div upon click except the current one-CodePudding

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

CodePudding user response：

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>

CodePudding user response：

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>