Losowanie

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ON&ON</title>
</head>

<body>
    <button class="addPlayer"> Dodaj Gracza </button>
    <input class="playerName" type="integer" value="" placeholder="Dodaj gracza" />
    <input class="groupSize" type="integer" value="" placeholder="Liczba graczy w drużynie" />
    <input class="groupCount" type="integer" value="" placeholder="Liczba drużyn" />
    <button class="randomizeTeam"> Losuj</button>
    <div class="allPlayers"></div>
    <div class="groups"></div>




    <script src="main.js"></script>
</body>

</html>

JavaScript

const defaultPlayers = ['ja', 'ja2', 'ja3', 'ja24', 'jas', 'jaz2', 'jag2', 'ja2z', ];
let players = defaultPlayers.concat([]);

const randomizeTeam = document.querySelector(".randomizeTeam");
const addName = document.querySelector(".addPlayer");
const allPlayers = document.querySelector(".allPlayers");
const groups = document.querySelector('.groups');



const addPlayer = (e) => {
    e.preventDefault();
    players.push(document.querySelector(".playerName").value);
    console.log(players);
}


const randomize = (e) => {
    e.preventDefault();
    const groupCount = document.querySelector(".groupCount").value;



    for (i = 0; i < groupCount; i++) {
        var div = document.createElement('div');
        div.className = 'group';
        div.id = 'group' + (i + 1);
        groups.appendChild(div);
        let h2 = document.createElement('h2');
        h2.innerHTML = "Group " + (i + 1);
        div.appendChild(h2);


    }
    
    players.forEach(function () {
        const groupSize = document.querySelector(".groupSize").value;

        for (j = 0; j < groupSize; j++) {
            let randname = Math.floor(Math.random() * players.length);
            console.log(randname);

            if (players[randname]) {
                let p = document.createElement('p');
                p.innerHTML = players[randname];
                div.append(p);
            }

            players.splice(randname, 1);
            console.log(groupSize);
        }
    });





}




randomizeTeam.addEventListener('click', randomize);

addName.addEventListener('click', addPlayer);