Creating variable variables in js

[bennever]

Hi, I have developed a website for my snooker league and have used the 2 drop down list technique to select team players from a team list. This all works well although is somewhat wasteful of code!

I have tried to reduce the coding by creating the drop down list of players by using a for loop but the result is that the player's name is recognised by js as a string and not as the defined variable.

The link to the web page is here (http://www.ennever.com/snooker/submitresults5.shtml) and the js includes this code:

=========================================
if(document.drop_list.Hometeam.value == TeamA){
var i=1;
for (i=1;i<=TeamAPlayers;i++)
{
addOption(document.drop_list.PlayerHome1,['PlayerA'+i],['PlayerA'+i]);
}
addOption(document.drop_list.PlayerHome1,Bye, Bye);
}
===========================================

This is attempting to reduce the working code from this, which needs to be hardcoded every time there is a change in the number of players in a team:

===========================================
if(document.drop_list.Hometeam.value == TeamA){
addOption(document.drop_list.PlayerHome1,PlayerA1, PlayerA1);
addOption(document.drop_list.PlayerHome1,PlayerA2, PlayerA2);
addOption(document.drop_list.PlayerHome1,PlayerA3, PlayerA3);
addOption(document.drop_list.PlayerHome1,PlayerA4, PlayerA4);
addOption(document.drop_list.PlayerHome1,PlayerA5, PlayerA5);
addOption(document.drop_list.PlayerHome1,PlayerA6, PlayerA6);
addOption(document.drop_list.PlayerHome1,PlayerA7, PlayerA7);
addOption(document.drop_list.PlayerHome1,PlayerA8, PlayerA8);
addOption(document.drop_list.PlayerHome1,PlayerA9, PlayerA9);
addOption(document.drop_list.PlayerHome1,PlayerA10 , PlayerA10);
addOption(document.drop_list.PlayerHome1,Bye, Bye);
}
===========================================

In both cases the following vars are pre-defined:
var TeamAPlayers = 6; ie no of players to loop through & create list from
var TeamA = "A"; sample team name
var PlayerA1 = "MeA1"; etc etc to A10 sample team players
var Bye = "Bye"; always needed!

Can anyone offer me a solution where the "addOption" line references the defined variable please???

Many thanks for your help
Barry

[AJ-D]

You're looking for an array (http://www.w3schools.com/JS/js_obj_array.asp):
var team1 = [ "playerA1", "playerA2", "playerA3" ];
var team2 = new Array( "playerB1", "playerB2", "playerB3" );
var i;

for( i in team1 )
addOption( document.drop_list.PlayerHome1, team1[i], team1[i] );

for( i = 0; i < team2.length; i++ )
addOption( document.drop_list.PlayerHome2, team2[i], team2[i] );


Either type of loop can be used with either way of declaring the array, if you're wondering.

[bennever]

Many thanks AJ-D, I'll give it a go.

[bennever]

Hi AJ-D, that works thank you but if I can loop through the dropo_list names I can reduce the code by 80%. Is there a way for example to do the following as so far all the options I've tried fail!

var list = new Array("document.drop_list.PlayerHome1";,"document.drop_list.PlayerHome2","document.drop_list.PlayerHome3","document.drop_list.PlayerHome4","document.drop_list.PlayerHome5");

for (var n=1; n <=5;++n){ //ie loop through the 5 players

if(document.drop_list.Hometeam.value == Teams[0]){
for (var k=0; k< TeamAPlayerNames.length;++k)
{
addOption(list[n], TeamAPlayerNames[k], TeamAPlayerNames[k]);
}
addOption(list[n], Bye, Bye);
}

If I hardcode 5 blocks of code with list[n] replaced by document.drop_list.PlayerHome1 thru 5 all works, hence a loop can reduce my code by 80%!

Thanks anyone.

[AJ-D]

Sorry for the delay, hadn't noticed your second reply. It's not really worth optimizing such a small piece of code so much, but since you're learning it I'll show you how to do it all in one loop line. There are, of course, many ways of doing this, including using objects rather than multpile and multi-dimensional arrays. This code also assumes that all arrays are correct. Really, the only problem you seemed to be having was that you were using strings rather than referencing the page elements when creating the array of lists.

var names = [ ["name1a", "name1b], ["name2a", "name2b"] ];
var teams = [ "team1", "team2" ];
var lists = [document.drop_list.PlayerHome1, document.drop_list.PlayerHome2];
var i, j;

for( i in lists )
for( j in names[i] )
addOption( lists[i], teams[i], names[i][j] );
If you really want, you should be able to create/pick up all the lists via code rather than specifying them manually, too.