Use a script to randomly select three slides from five slides and display it and hide the unselected two slides

Question

I have the following html and javascript code which has a slider with five slides I need to randomly select three of the five slides every time the page loads, and have the unselected two slides be completely hidden. Thanks for telling me where is the problem with my code?

I tried the following code, but all five slides show up. Every time the page loads, three of the slides randomly have content and two are empty. I need to not show those two blank slides

const slogans = Array.from(document.querySelectorAll('.slogan'));
const nonEmptySlogans = slogans.filter(slogan => slogan.innerHTML.trim() !== '');

if (nonEmptySlogans.length >= 3) {
  const selectedSlogans = [];

  while (selectedSlogans.length < 3) {
    const randomIndex = Math.floor(Math.random() * nonEmptySlogans.length);
    const randomSlogan = nonEmptySlogans.splice(randomIndex, 1)[0];
    selectedSlogans.push(randomSlogan);
    randomSlogan.style.display = 'block';
  }
}
'use strict'
var testim = document.getElementById("testim"),
  testimDots = Array.prototype.slice.call(document.getElementById("testim-dots").children),
  testimContent = Array.prototype.slice.call(document.getElementById("testim-content").children),
  testimLeftArrow = document.getElementById("left-arrow"),
  testimRightArrow = document.getElementById("right-arrow"),
  testimSpeed = 4500,
  currentSlide = 0,
  currentActive = 0,
  testimTimer,
  touchStartPos,
  touchEndPos,
  touchPosDiff,
  ignoreTouch = 30;;

window.onload = function() {

  // Testim Script
  function playSlide(slide) {
    for (var k = 0; k < testimDots.length; k++) {
      testimContent[k].classList.remove("active");
      testimContent[k].classList.remove("inactive");
      testimDots[k].classList.remove("active");
    }

    if (slide < 0) {
      slide = currentSlide = testimContent.length - 1;
    }

    if (slide > testimContent.length - 1) {
      slide = currentSlide = 0;
    }

    if (currentActive != currentSlide) {
      testimContent[currentActive].classList.add("inactive");
    }
    testimContent[slide].classList.add("active");
    testimDots[slide].classList.add("active");

    currentActive = currentSlide;

    clearTimeout(testimTimer);
    testimTimer = setTimeout(function() {
      playSlide(currentSlide += 1);
    }, testimSpeed)
  }

  testimLeftArrow.addEventListener("click", function() {
    playSlide(currentSlide -= 1);
  })

  testimRightArrow.addEventListener("click", function() {
    playSlide(currentSlide += 1);
  })

  for (var l = 0; l < testimDots.length; l++) {
    testimDots[l].addEventListener("click", function() {
      playSlide(currentSlide = testimDots.indexOf(this));
    })
  }

  playSlide(currentSlide);

  // keyboard shortcuts
  document.addEventListener("keyup", function(e) {
    switch (e.keyCode) {
      case 37:
        testimLeftArrow.click();
        break;

      case 39:
        testimRightArrow.click();
        break;

      case 39:
        testimRightArrow.click();
        break;

      default:
        break;
    }
  })

  testim.addEventListener("touchstart", function(e) {
    touchStartPos = e.changedTouches[0].clientX;
  })

  testim.addEventListener("touchend", function(e) {
    touchEndPos = e.changedTouches[0].clientX;

    touchPosDiff = touchStartPos - touchEndPos;

    console.log(touchPosDiff);
    console.log(touchStartPos);
    console.log(touchEndPos);


    if (touchPosDiff > 0 + ignoreTouch) {
      testimLeftArrow.click();
    } else if (touchPosDiff < 0 - ignoreTouch) {
      testimRightArrow.click();
    } else {
      return;
    }

  })
}

<div class="container">
  <section id="testim" class="testim">
    <div class="testim-cover">
      <div class="wrap">

        <span id="right-arrow" class="arrow right fa fa-chevron-right"></span>
        <span id="left-arrow" class="arrow left fa fa-chevron-left "></span>
        <ul id="testim-dots" class="dots">
          <li class="dot active"></li>
          <!--
                    -->
          <li class="dot"></li>
          <!--
                    -->
          <li class="dot"></li>
          <!--
                    -->
          <li class="dot"></li>
          <!--
                    -->
          <li class="dot"></li>
        </ul>
        <div id="testim-content" class="cont">

          <div class="slogan">
            <p>"How does visual identity design help business/product value grow?"</p>
            <h2>MINE</h2>
          </div>

          <div class="slogan">
            <p>"How can we analyze ourselves, audience, competitors, and market and help business progress/grow?"</p>
            <h2>MINE</h2>
          </div>

          <div class="slogan">
            <p>"How can I differentiate my business from others?"</p>
            <h2>MINE</h2>
          </div>

          <div class="slogan">
            <p>"What is the best and latest business model and plan for me?"</p>
            <h2>MINE</h2>
          </div>

          <div class="slogan">
            <p>"How will innovative targeting be achieved at each stage of business?"</p>
            <h2>MINE</h2>
          </div>

        </div>

      </div>
    </div>
  </section>
</div>

Answer 1

Try this set.

const getRandomNumber = count => Math.floor(Math.random() * count);
const randomNumbers = (len, count) => {
  const numbers = new Set();
  while (numbers.size < len) numbers.add(getRandomNumber(count));
  return [...numbers];
};

const slogans = [...document.querySelectorAll('.slogan')];
const nonEmptySlogans = slogans.filter(slogan => slogan.textContent.trim() !== '');

if (nonEmptySlogans.length >= 3) {
  const showList = randomNumbers(3, nonEmptySlogans); // get 3 of how many found
  slogans.forEach((slogan,i) => slogan.classList.toggle("show",showList.contains(i))
}

Use this CSS

.slogan { display: none }
.slogan.show { display: block }