Draw in two tables vanilla JS

Question

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 + "
" + 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 + "
" + 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 + "
" + Players2[randomPerson];
        Players2.splice(randomPerson, 1);
      }
    } else {
      console.log('error_empty_array');
    }
  }
});


  
    Wszelkie wpisane imiona zostaną usunięte
    
      
      
    
  


  
    dodaj osobę
    
      
      
      
      
        
        
      
    

  
  
    Uczestnicy

user_9619520 · Answer

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.

user_17328585 · Answer

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 + "
" + Players[i];
        }
    }
    else{
        console.log('error_empty_array');
    }
    
});

Draw in two tables vanilla JS

2 Answers