Need Help!!! Javascript DOM

[traineeirishprogrammer]

I am currently learning javascript and DOM. Basically I am currently writing a function to add rows to a table and I am trying to do it using DOM. Each row is made up of 4 cells. Here is the code!!!

function addRow()
{
  var tbl=document.getElementById('game');
  var lastRow = tbl.rows.length;
  var row = tbl.insertRow(lastRow);
 
  var cell_1 = row.insertCell(0);
  var cell_2= row.insertCell(1);
  var cell_3 = row.insertCell(2);
  var cell_4 = row.insertCell(3);
 
 
cell_1.innerHTML='<div align="center"><input type="button" onclick="deleteRow(this)" value="Delete" ></div>';
 
var team_1 = document.createElement("select");  
 
team_1.setAttribute('name','team_A');
 
alert(team_1.name);
team_1.options[0] = new Option("Ballina",1);
team_1.options[1] = new Option("Silvermines",2);
team_1.options[2] = new Option("Kilruane",3);
team_1.options[3] = new Option("Nenagh",4);
team_1.options[4] = new Option("Borrisakane",5);
team_1.options[5] = new Option("Potroe",6);
team_1.options[6] = new Option("Burgess",7);
team_1.options[7] = new Option("Kiladangan",8);
team_1.options[8] = new Option("Lorrah",9);
team_1.options[9] = new Option("Roscrea",10);
team_1.options[10] = new Option("TempleDerry",11);
team_1.options[11] = new Option("Shannon Rovers",12);
 
cell_2.appendChild(team_1);
 
 
 
var team_2 = document.createElement('select');  
 
 
team_2.name = 'team_B';
 
 
 
team_2.options[0] = new Option("Ballina",1);
team_2.options[1] = new Option("Silvermines",2);
team_2.options[2] = new Option("Kilruane",3);
team_2.options[3] = new Option("Nenagh",4);
team_2.options[4] = new Option("Borrisakane",5);
team_2.options[5] = new Option("Potroe",6);
team_2.options[6] = new Option("Burgess",7);
team_2.options[7] = new Option("Kiladangan",8);
team_2.options[8] = new Option("Lorrah",9);
team_2.options[9] = new Option("Roscrea",10);
team_2.options[10] = new Option("TempleDerrteam_2",11);
team_2.options[11] = new Option("Shannon Rovers",12);
 
cell_3.appendChild(team_2);
 
 
 
var mydate= new Date()
var theyear=mydate.getFullYear()
var themonth=mydate.getMonth()+1
var thetoday=mydate.getDate()
 
var dateinput = document.createElement("input");
dateinput.type = 'text';
dateinput.id = 'no'+lastRow;
dateinput.value=thetoday+'-'+themonth+'-'+theyear;
dateinput.size='25';
cell_4.appendChild(dateinput);
 
var getdate = document.createElement('a');
getdate.href= "javascript:NewCal('no"+lastRow+"','ddmmyyyy')";
getdate.innerHTML= "<img src='../../calender/cal.gif' width='16' height='16' border='0' alt='Pick a date'>";
cell_4.appendChild(getdate);
 
}

The CODE is not entirely finished but my problem is when I try to access the select list "team_A" either through getElementsByName or "team_B" . It cant find it. Can anyone tell me where I am going wrong. Thanks

[gits]

hi ...

are you using IE? IE don't let you set the name of a form-element properly. have a look at:

http://javascript.about.com/library/bliebug2.htm

other browsers do well ... only the ie-jscript makes a problem here.

kind regards

[traineeirishprogrammer]

Thanks I tried

team_1 = document.createElement("<select name='team_A'></select>");

instead of

team_1 = document.createElement("select");
team_1.name = " team_A";

However at the end of the function just for testing purposes I used

alert(document.getElementsByName('team_A').name);

Just to see the result.

and the alert came up with te result undefined

Do you know where the problem is in this script.

Thanks.

[iam_clint]

thats because

document.getElementsByName('team_A').name

is plural so you gotta tell it which team_a to get
document.getElementsByName('team_A')[0].name

[traineeirishprogrammer]

Thanks for your help. I will ask more questions as I progress through my project.

[gits]

Thanks for your help. I will ask more questions as I progress through my project.

no problem ;) you and your questions are always welcome ... post back anytime ...

kind regards