Diffrent Random String Tournament Matching on JavaScript

You need to create an Array with externally entered strings in JavaScript and print them in a 2-by-2 manner, provided that the Array in series is different. I tried this code, but Randoms are the same. Couldn't help please. And i should match the input with Array.

<!DOCTYPE html>
<html>
<head>
   <script>
      function isim(){
         var myArray = ["Name1", 'Name2', 'Name3', 'Name4'];

         var rand = myArray[(Math.random() * myArray.length) | 0]
         var rand2 = myArray[(Math.random() * myArray.length) | 0]
         var rand3 = myArray[(Math.random() * myArray.length) | 0]
         var rand4 = myArray[(Math.random() * myArray.length) | 0]

         document.getElementById("sonuc1").innerHTML = rand;
         document.getElementById("sonuc2").innerHTML = rand2;

         document.getElementById("sonuc3").innerHTML = rand3;
         document.getElementById("sonuc4").innerHTML = rand4;
      }
   </script>
</head>
<body>
<center>

   <h1>Match</h1>

   <form>
      <input name="isim[1]" placeholder="Name1"> <br><br>

      <input name="isim[2]" placeholder="Name2"><br><br>

      <input name="isim[3]" placeholder="Name3"><br><br>

      <input name="isim[4]" placeholder="Name4"><br><br>

      <input type="button" value="Match" onclick="isim()">
   </form>

   <p id="sonuc1"></p>
   <p id="sonuc2"></p>
   <br><br>
   <p id="sonuc3"></p>
   <p id="sonuc4"></p>

</center>
</body>
</html>

Solution

The same array entry can be picked multiple times if you just select a random item from the array every time. To make sure rand1 through rand4 are unique, you have to remove the already picked items from the array, or prevent it from being picked through other means. One way would be to shuffle the array and pop or shift your random entries, like so:

<!DOCTYPE html>
<html>
<head>
   <script>
     function shuffle(a) {
          for (let i = a.length - 1; i > 0; i--) {
              const j = Math.floor(Math.random() * (i + 1));
              [a[i], a[j]] = [a[j], a[i]];
          }
          return a;
      }
      
      function isim(){
         var myArray = ["Name1", 'Name2', 'Name3', 'Name4'];
         
         shuffle(myArray);

         var rand = myArray.pop();
         var rand2 = myArray.pop();
         var rand3 = myArray.pop();
         var rand4 = myArray.pop();

         document.getElementById("sonuc1").innerHTML = rand;
         document.getElementById("sonuc2").innerHTML = rand2;

         document.getElementById("sonuc3").innerHTML = rand3;
         document.getElementById("sonuc4").innerHTML = rand4;
      }
   </script>
</head>
<body>
<center>

   <h1>Match</h1>

   <form>
      <input name="isim[1]" placeholder="Name1"> <br><br>

      <input name="isim[2]" placeholder="Name2"><br><br>

      <input name="isim[3]" placeholder="Name3"><br><br>

      <input name="isim[4]" placeholder="Name4"><br><br>

      <input type="button" value="Match" onclick="isim()">
   </form>

   <p id="sonuc1"></p>
   <p id="sonuc2"></p>
   <br><br>
   <p id="sonuc3"></p>
   <p id="sonuc4"></p>

</center>
</body>
</html>