mercredi 19 juin 2019

How to fill generated table with random values in JavaScript

I want to make application teamMaker, choose how many players and teams you need, then click button and application will generate table with random values with range from Player 1 - Value of input PlayersNum. My biggest problem is table is filling but columns have same values. What should i do?

function makeTeams() {

let teamsNum = document.getElementById("teamsNum").value;
    let playersNum = document.getElementById("playersNum").value;

if(playersNum %teamsNum == 0){
    const wrapper = document.querySelector(".wrapper");
    const tbl = document.createElement("table");
    const tblBody = document.createElement("tbody");
    let nums = []

    for(let x = 0; x < playersNum; x++){
        let random = Math.floor(Math.random() * playersNum + 1);
        if(nums.indexOf(random) === -1){
            nums.push(random);
            console.table(nums);
        } else x--;
    }

    for (let i = 0; i < playersNum/teamsNum; i++) {
      let row = document.createElement("tr");

      for (let j = 0; j < teamsNum; j++) {
        let cell = document.createElement("td");
        let cellText = document.createTextNode("Player " + nums[i]);
        cell.appendChild(cellText);
        row.appendChild(cell);
      }
      tblBody.appendChild(row);
    }

    tbl.appendChild(tblBody);
    wrapper.appendChild(tbl);
    tbl.setAttribute("border", "2");
    tbl.style.margin = "20px auto";
    tbl.style.width = "50%";
    tbl.style.textAlign = "center";

} else alert("Teams must have the same number of players!");

}




Aucun commentaire:

Enregistrer un commentaire