html - How to work with multidimensional-arrays in Javascript? -

i'm trying make code works this:

1. get number of teams (y) , number of players(x).
2. get x names , x ranks.
3. create balance teams based on player ranks. each team should have x/y players.
4. print each team separately.

i can't see problem , why code doesn't work. hope guys help.

this code:

function step1() {  	var teams = document.getelementbyid("teams").value;  	var players = document.getelementbyid("players").value;  	var main = document.getelementbyid("main");  	main.innerhtml="";  	for(var i=1;i<=players;i++){   		main.innerhtml += "<input class='names' placeholder='player "+i+"' type='text' style='width:100px'/>   "+   		"<input class='ranks' placeholder='rank' type='text' style='width:40px'/><br/>";  	}  	main.innerhtml+="<br/><button onclick='buildteams("+players+","+teams+")'>build</button>";  }  function buildteams(playersint,teamsint) {  	var error=0;  	var names = new array(playersint);	  	var ranks = new array(playersint);  	var nameinp = document.getelementsbyclassname("names");	  	var rankinp = document.getelementsbyclassname("ranks");  	for(var i=0;i<playersint;i++) {  		names[i] = nameinp[i].value;	  	}  	for(var i=0;i<playersint;i++) {  		ranks[i] = rankinp[i].value;  	}  	var teams = new array(teamsint);  	for(var i=0;i<teamsint;i++) {  		teams[i]=new array(playersint/teamsint);  	}  	for(var i=0;i<(playersint/teamsint);i++) {  		for(var j=0;j<teamsint;j++) {  			teams[i][j]=names[checkmvp(ranks)];  			ranks[checkmvp(ranks)]=-1;  		}  	}  	for(var i=0;i<teamsint;i++) {  		alert(teams[i]);  	}    }  function checkmvp(ranks) {  	var high= ranks[0];  	var bpi=0;  	for(var i=1;i<ranks.length;i++) {  		if(ranks[i]>high) {  			bpi=i;  		}  	}  	return bpi;  }

<h2>power balance</h2>  <div id="main">  number of teams:  <input type="text" id="teams" style="width:30px"/>   <br/><br/>  number of players:  <input type="text" id="players" style="width:30px"/>   <br/><br/>  <p id="error"></p>  <input type="button" onclick="step1()" value="next"/>  </div>

check out solution here. should working fine. mistakenly swapped logic in loop adding players teams. also, it's habit use array.prototype.push create new element using loop function after creating array new array(length).

function step1() {     var teams = document.getelementbyid("teams").value;     var players = document.getelementbyid("players").value;     var main = document.getelementbyid("main");     main.innerhtml="";     for(var i=1;i<=players;i++){          main.innerhtml += "<input class='names' placeholder='player "+i+"' type='text' style='width:100px'/>   "+          "<input class='ranks' placeholder='rank' type='text' style='width:40px'/><br/>";     }     main.innerhtml+="<br/><button onclick='buildteams("+players+","+teams+")'>build</button>"; } function buildteams(playersint,teamsint) {     var error=0;     var names = [];      var ranks = [];     var nameinp = document.getelementsbyclassname("names");      var rankinp = document.getelementsbyclassname("ranks");     for(var i=0;i<playersint;i++) {         names.push(nameinp[i].value);        }     for(var e=0;e<playersint;e++) {         ranks.push(rankinp[e].value);     }     var teams = [];     for(var x=0;x<teamsint;x++) {         teams.push([]);     }     for(var a=0;a<teamsint;a++) {         for(var j=0;j<(playersint/teamsint);j++) {             console.log(teams[a]);             teams[a].push(names[checkmvp(ranks)]);             ranks[checkmvp(ranks)]=-1;         }     }     alert(teams);     for(var w=0;w<teamsint;w++) {         alert(teams[w]);     }  } function checkmvp(ranks) {     var high= ranks[0];     var bpi=0;     for(var i=1;i<ranks.length;i++) {         if(ranks[i]>high) {             bpi=i;         }     }     return bpi; }