Diffrent Random String Tournament Matching on JavaScript

Question

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>

Why are you using the [Bitwise OR](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_OR_2) operator? — adiga, Dec 16 '19 at 11:22
i dont know i just tried it. I'm new on learning javascript. — lithé, Dec 16 '19 at 11:23

Fdebijl · Accepted Answer · 2019-12-16T11:32:09.603

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>

his answer seems to show exactly how to do it, though the shuffling function is some extra knowledge you shouldn't concern yourself with as of right now. — Jhecht, Dec 16 '19 at 11:28
Hey Fdebijl. And i have to match this with Input type of Text. can you help me? — lithé, Dec 16 '19 at 11:33
@lithé do you mean you want to use the value of the text inputs instead of myArray inside isim()? — Fdebijl, Dec 16 '19 at 11:36
That is an easy change, you can simply redefine `myArray` as `[document.querySelector('[name="isim[1]"]').value, document.querySelector('[name="isim[2]"]').value, document.querySelector('[name="isim[3]"]').value, document.querySelector('[name="isim[4]"]').value]`. At this point you're getting a lot of repeated code, so using a `for` loop would probably be a good idea. You could also randomize the order here, instead of using a separate shuffle function. — Fdebijl, Dec 16 '19 at 11:54

Diffrent Random String Tournament Matching on JavaScript

1 Answers1