Draw in two tables vanilla JS-CodePudding

I am working with program that will randomly choose who is making a Christmas gift to whom.

I've created an empty array. When you add a "player" it's pushing the name into two different arrays. Players[] and Players2[].

When you start a draw. The program writes the names of the Players[] on the left hand side and on the right side it writes the drawn names from Players2[].

Every Player from Players2[], after being drawn, is being deleted from the array so in the end we have an empty Players2[] array and full Players[] array.

The problem is: I can't make a working if statement that is checking if the person will not draw himself...

let Players = [];
let Players2 = [];

const addBTN = document.getElementById('addBTN');
const onlyLetters = /^[a-zżźćóęśńłA-ZŻŹĆÓŁĘŚŃŁ ] $/;
const refreshBTN = document.getElementById('refreshBTN');
const warningBTNyes = document.getElementById('warning-button-yes');
const warningBTNno = document.getElementById('warning-button-no');
const playersList = document.getElementById('playersList');
const playersList2 = document.getElementById('playersList2');
const startBTN = document.getElementById('startBTN');
const drawLotsBTN = document.getElementById('drawLotsBTN');

addBTN.addEventListener('click', function() {
  const input = document.getElementById('addPLAYER');
  const person = document.getElementById('addPLAYER').value;
  if (input.value == "") {
    console.log('error_empty_input');
    document.getElementById('errorMSG').style.color = "red";
    document.getElementById('errorMSG').innerHTML = "Wpisz imię osoby!";
  } else if (input.value.match(onlyLetters)) {
    console.log('good');
    Players.push(person);
    Players2.push(person);
    playersList.innerHTML = playersList.innerHTML   "<br>"   person;
    document.getElementById('addPLAYER').value = "";
    document.getElementById('errorMSG').style.color = "green";
    document.getElementById('errorMSG').innerHTML = "Powodzenie! Dodaj kolejną osobę.";
  } else {
    console.log('error_input');
    document.getElementById('errorMSG').style.color = "red";
    document.getElementById('errorMSG').innerHTML = "Coś jest nie tak z imieniem. Pamiętaj aby wprowadzać same litery!";
  }
});

refreshBTN.addEventListener('click', function() {
  document.getElementById('warning').style.display = "block";
});

warningBTNyes.addEventListener('click', function() {
  location.reload(true);
  document.getElementById('addPLAYER').value = "";
});

warningBTNno.addEventListener('click', function() {
  document.getElementById('warning').style.display = "none";
});

startBTN.addEventListener('click', function() {
  drawLotsBTN.disabled = false;
  const input = document.getElementById('addPLAYER');
  const person = document.getElementById('addPLAYER').value;
  if (input.value == "") {

  } else if (input.value.match(onlyLetters)) {
    console.log('good');
    Players.push(person);
    Players2.push(person);
    playersList.innerHTML = playersList.innerHTML   "<br>"   person;
    document.getElementById('addPLAYER').value = "";
    document.getElementById('errorMSG').style.color = "green";
    document.getElementById('errorMSG').innerHTML = "Powodzenie! Zaczynasz losowanie!";
  } else {
    console.log('error_input');
    document.getElementById('errorMSG').style.color = "red";
    document.getElementById('errorMSG').innerHTML = "Coś jest nie tak z imieniem. Pamiętaj aby wprowadzać same litery!";
  }
  document.getElementById('addPLAYER').disabled = true;
});

drawLotsBTN.addEventListener('click', function() {
  for (let i = 0; i = Players2.length; i  ) {
    if (Players2.length > 0) {
      randomPerson = Math.floor(Math.random() * Players2.length);
      if (randomPerson != Players.indexOf(i)) {
        console.log(Players2[randomPerson]);
        playersList2.innerHTML = playersList2.innerHTML   "<br>"   Players2[randomPerson];
        Players2.splice(randomPerson, 1);
      }
    } else {
      console.log('error_empty_array');
    }
  }
});

<div id="warning" class="warning">
  <div class="warning-flex">
    <h1>Wszelkie wpisane imiona zostaną usunięte</h1>
    <div class="warning-buttons">
      <button id="warning-button-yes" class="warning-button-yes">Tak</button>
      <button id="warning-button-no" class="warning-button no">Nie</button>
    </div>
  </div>
</div>
<div class="lotteryContainer">
  <div class="left">
    <p>dodaj osobę</p>
    <div class="addPerson">
      <input required id="addPLAYER" type="text">
      <button id="addBTN"> </button>
      <p id="errorMSG"></p>
      <div class="refresh">
        <button id="refreshBTN">Od nowa</button>
        <button id="startBTN">Start</button>
      </div>
    </div>

  </div>
  <div class="right">
    <p>Uczestnicy</p>
    <div class="tables">
      <div class="tableLeft">
        <p id=playersList></p>
      </div>
      <div class="tableRight">
        <p id="playersList2"></p>
      </div>
    </div>
    <button id="drawLotsBTN">Losuj</button>
  </div>
</div>
<script src="app.js"></script>

CodePudding user response：

Now if I understand what your program aims to do, there is a simple algorithm for it. How I understand your goal: You have a list of persons who are going to give presents to each other. (like in secret Santa). It is random who will give to who, but each person gives and receives one gift. How to implement it (i'd normaly use maps, but I am guessing you are more comfortable with arrays):

players = ["Adam", "Bret", "Clay", "Donald"];
players.sort(function(a, b){return 0.5 - Math.random()}); // shuffles array
gives_to = [...players]; // copy values of array
gives_to.push(gives_to.shift()); // let the first element be the last

Here the first player (players[0]) will give to gives_to[0] and the second to gives_to[1] etc.

CodePudding user response：

I've created this JS script trying to use Trygve Ruud algorithm but it doesn't work like desired.

drawLotsBTN.addEventListener('click', function(){
    if(Players.length > 0) {
        console.log(Players)
        Players.sort(function(a, b){
            return 0.5 - Math.random();
        });
        for(let i = 0; i < Players.length; i  ){
            playersList2.innerHTML = playersList2.innerHTML   "<br>"   Players[i];
        }
    }
    else{
        console.log('error_empty_array');
    }
    
});