How to show only selected number of elements in array?

Question

I developed a party-game just for fun, and can't solve this problem. So, at first I ask user "How many clothes you want to see?". I set that data to local storage, and use on other page. So my problem is: I want to show only user selected number of elements in array (I'm so sorry for my bad english, I really need your help). Here are my codes:

index.html

<div class="container">
      <div class="small-container">
        <p id="text">How many clothes you want to choose ?</p>
        <input type="number" placeholder="1 to 6" id="count" />
      </div>
      <button id="btn">Start</button>
</div>

script1.js

window.onload = function() {
        var btn = document.getElementById("btn");
        var count = document.getElementById("count");
        btn.addEventListener("click", function() {
          document.location.href = "random.html";
          localStorage.setItem("count", count.value);
        });
};

game.html

<div class="small-container">
        <p id="text">Your random clothes: </p>
        <img id="img" />
</div>

script2.js

    var options = [
          "T-Shirt",
          "Singlet",
          "Underwear",
          "Socks",
          "Shorts",
          "Shoes"
        ];
        var btn = document.getElementById("btn");
        var text = document.getElementById("text");
        var img = document.getElementById("img");
        btn.addEventListener("click", function() {
          var count = localStorage.getItem("count");

          var randomChoice = options.splice(Math.floor(Math.random() * options.length), 1);
          btn.innerHTML = "Shuffle";
          text.innerHTML = randomChoice;
          img.setAttribute("src", `img/${randomChoice}.png`);

          if (randomChoice >= options.length) {
            text.innerHTML = "End of game :)";
            btn.innerHTML = "Start again";
            img.removeAttribute("src");
            btn.addEventListener("click", function() {
              // document.location.href = "intro.html";
              document.location.href = "random.html";
            });
          }
        });
      };

So every time user clicks the button, clothes are changing. For example, if user was chosen 4 as count, I want to show him/her only 4 clothes, and they must see before every click just one image on their pages.

Answer 1

If i understood ur question correctly, your issue was that you didnt know how to stop the game once the good amount of clothes has been shown

Here is a solution

        btn.addEventListener("click", function() {
          var count = localStorage.getItem("count");
          localStorage.setItem("count", count-1); //decreasing the value of count because one clothe is about to be shown on screen
          if (count == 0) { //if count is at 0, that means game is over
                text.innerHTML = "End of game :)";
                btn.innerHTML = "Start again";
                img.removeAttribute("src");
                btn.addEventListener("click", function() {
                  // document.location.href = "intro.html";
                  document.location.href = "random.html";
                });
          }

          else{ //we show a new cloth
              var randomChoice = options.splice(Math.floor(Math.random() * options.length), 1);
              btn.innerHTML = "Shuffle";
              text.innerHTML = randomChoice;
              img.setAttribute("src", `img/${randomChoice}.png`);
          }
        });

But with that code its still possible that the same cloth is picked several times. To avoid that, while keeping the code in pure javascript, I guess you could use "hidden" inputs to store the clothes that have been shown, or other localStorage variables.