Function return undefined value in textarea

JavaScript
1

Hi Experts,

I have troubleshooting my code for couple of days and a right solution is still not found.
I have a js file which suppose to draw 2 textareas without any values initially. But for my case, the second textarea constantly return a “undefined” value.

Code:


/**
 * Broswer class.
 *
 */
function Browser(){
  this.dom  = document.getElementById?1:0;
  this.ie4  = (document.all && !this.dom)?1:0;
  this.ns4  = (document.layers && !this.dom)?1:0;
  this.ns6  = (this.dom && !document.all)?1:0;
  this.ie5  = (this.dom && document.all)?1:0;
  this.ok   = this.dom || this.ie4 || this.ns4;
  this.platform = navigator.platform;
}
var browser = new Browser();

/**
 * advSearchTable Class
 *
 */
function detailTable(nameCond)
{
  this.nameCond   = nameCond;
  this.basket = new Array();
  this.segObj = document.getElementById('detailTable');
}

detailTable.prototype.select = function (conditionSelected)
{
	var i=this.basket.length; alert(conditionSelected);
	this.basket[i]=new Sem(conditionSelected);
	this.renderDetailTable();
}
detailTable.prototype.select = function (conditionBmSelected)
{
	var i=this.basket.length; alert(conditionBmSelected);
	this.basket[i]=new Sem(conditionBmSelected);
	this.renderDetailTable();
}

detailTable.prototype.remove = function(index)
{
  this.basket[index].deleteSegment();
  this.renderDetailTable();
}

detailTable.prototype.changeValue = function(index, field, value)
{
  this.basket[index].setCondition(value);
  this.renderDetailTable();
}

detailTable.prototype.renderDetailTable = function()
{
  var unit        = 0;
  var counter     = 0;
  var tableNumber = 1;
  var no          = 1;
  var segTable    = "";

  segTable += "<table>";
  segTable +="<tr>";
  segTable +="<td class='tdLabel' colspan='2'>EN</td>";
  segTable +="<td class='tdLabel'>BM</td>";
  segTable +="</tr>";

  for(i=0; i<this.basket.length; i++) {
    var seg=this.basket[i];
		if(seg.active=="No")
		continue;
		unit++;

    var conditionSelected = seg.conditionSelected
    var condition         = "condition:"+counter;
    var conditionBmSelected = seg.conditionBmSelected
    var conditionBm         = "conditionBm:"+counter;

    if (no%2==0)   segTable += "<tr>"; else segTable += "<tr class='trAlt2'>";

    segTable += "<td>"+no+".</td>";
    segTable += "<td nowrap width='50%'>";
    segTable += '<textarea name="'+condition+'" id="'+condition+'" style="height:40px;" size = "95" maxlength = "95" onChange="detailTable.changeValue('+i+',\\'condition\\',this.value);">'+conditionSelected+'</textarea></td>';
    segTable += "<td nowrap width='50%'>";
[B]    segTable += '<textarea name="'+conditionBm+'" id="'+conditionBm+'" style="height:40px;" size = "95" maxlength = "95" onChange="detailTable.changeValue('+i+',\\'conditionBm\\',this.value);">'+conditionBmSelected+'</textarea></td>';[/B]
    segTable += "<td><input type=\\"button\\" name=\\"Remove\\" value=\\"X\\" onClick=\\"detailTable.remove('"+i+"', false);\\" class=\\"remove\\"></td>";
    segTable += '</tr>';
    segTable += ''
    tableNumber++;
    counter++;
    no++;
  }
  segTable += "</table><br>";
  $("#hidRowCount").val(counter);

  this.segObj.innerHTML=((unit>0)?segTable:"");
}

function Sem(conditionSelected)
{
	this.active            = "Yes";
  this.conditionSelected = conditionSelected;
}

function Sem(conditionBmSelected)
{
	this.active            = "Yes";
  this.conditionSelected = conditionBmSelected;
}

Sem.prototype.deleteSegment = function()
{
	this.active = "No";
}

Sem.prototype.setCondition = function(value)
{
	this.conditionSelected = value;
  this.conditionBmSelected = value;
}

Value of ‘+conditionSelected+’ in line 82 above give an empty value which is what I want but Value of ‘+conditionBmSelected+’ in the line 83 (Bold) above give the “undefined” value.
I want both textarea empty initially. how do I do that? Please advice.

Thanks