Generating random number from range on click, that isn't the same as previous numbers-CodePudding

I don't really know what I'm doing but been playing with jQuery trying to achieve this. I had the functionality working fine with the exception of occasionally showing the same testimonial twice in a row, which I'm trying to solve. Here is my attempted code which doesn't compute, I'm quite sure it's something obvious that I don't understand! Any help is appreciated.

You can see the intended functionality here in the testimonial footer: https://blue-coast-f4d2bc.webflow.io/contact

     function getNumber(previous) {
  if (previous === undefined) {
      i = Math.floor(Math.random() * 14)   1;
      return i;
  }
  else {
    while {
      i = previous; 
      i = Math.floor(Math.random() * 14)   1;
    }
    return i;
  }


var quoteNumb = getNumber();
 $('.footer-testimonial-quote:nth-of-type(' quoteNumb ')').addClass('show');
  
  var footHeight = $('.testimonial-container').height();
$('.testimonial-container').css({'min-height': footHeight    'px'});
  $('.testimonial-container').css({'max-height': footHeight    'px'});
  
 $(document).ready(function() {
            $(".refresh-button").click(function() {
                $('.footer-testimonial-quote:nth-of-type(' quoteNumb ')').fadeOut(1000, function() {
                $('.footer-testimonial-quote:nth-of-type(' quoteNumb ')').removeClass('show');
                  quoteNumb = getNumber(quoteNumb);
                $('.footer-testimonial-quote:nth-of-type(' quoteNumb ')').addClass('show');
                $('.footer-testimonial-quote:nth-of-type(' quoteNumb ')').fadeIn(1000);
                });
            });
        });

CodePudding user response：

   let quotes = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];

let state = 0;

let sequence = getRandomSequence(0, quotes.length);

function getRandomSequence(start, length) {
    return shuffle(generateRange(start, length))
}
  
function generateRange(start, length) {
    return Array.from({ length }, (v,k) => k   start)
}
  
// Fisher-Yates shuffle
function shuffle(arr) {
    arr = [...arr];
    for (let i = arr.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i   1));
        [arr[i], arr[j]] = [arr[j], arr[i]];
    }
    return arr;
}

function nextInSequence() {
    let quoteNumb = quotes[sequence[(state  ) % sequence.length]];
    $('.footer-testimonial-quote:nth-of-type(' quoteNumb ')').addClass('show');
          $('.footer-testimonial-quote:nth-of-type(' quoteNumb ')').fadeIn(1000);
}

nextInSequence();

$(document).ready(function() {
            $(".refresh-button").click(function() {
        $('.footer-testimonial-quote:nth-of-type(' quoteNumb ')').fadeOut(1000, function() {
                $('.footer-testimonial-quote:nth-of-type(' quoteNumb ')').removeClass('show');
                  nextInSequence();
                });
            });
        });

CodePudding user response：

I'd suggest creating a random sequence that will determine which order the testimonials appear in. This way they will not repeat until all items have appeared.

We start by creating a sequence like 0,1,2,3,4 ... N, then we shuffle it using (in this case) a Fisher-Yates type shuffle.

Once we have our sequence created, getting the next item is easy. In this example, we cycle through all items, then return to the start.

let state = 0;

let sequence = getRandomSequence(1, 6);

function getRandomSequence(start, length) {
    return shuffle(generateRange(start, length))
}
  
function generateRange(start, length) {
    return Array.from({ length }, (v,k) => k   start)
}
  
// Fisher-Yates shuffle
function shuffle(arr) {
    arr = [...arr];
    for (let i = arr.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i   1));
        [arr[i], arr[j]] = [arr[j], arr[i]];
    }
    return arr;
}

// Should drop in as a replacement...
function getNumber() {
    return sequence[(state  ) % sequence.length];
}

quoteNumb = getNumber();

function showNextQuote() {
    $('.footer-testimonial-quote:nth-of-type(' quoteNumb ')').fadeOut(1000, function() {
        $('.footer-testimonial-quote:nth-of-type(' quoteNumb ')').removeClass('show');
        quoteNumb = getNumber(quoteNumb);
        $('.footer-testimonial-quote:nth-of-type(' quoteNumb ')').addClass('show');
        $('.footer-testimonial-quote:nth-of-type(' quoteNumb ')').fadeIn(1000);
    });
}

showNextQuote();

.footer-testimonial-quote
{ 
    visibility: hidden;
}

.show 
{ 
    visibility: visible;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP u1T9qYdvdihz0PPSiiqn/ /3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<button onclick='showNextQuote()'>
Next quote
</button>
<br><br>

  <div >What a great product!</div>
  <div >Great product!</div>
  <div >Love it</div>
  <div >Amazing</div>
  <div >Meh</div>
  <div >Awesome, would recommend</div>