Error: this.basket[index].setCondition is not a function

[Php Beginner]

Hi there,

I have designed text fields which allow user to enter the with single/multi rows
data into database. I have 2 javascript files which are written in the same way, just different variable and function name. But one of them is not working.

Below is my scripts:-

/**
 * 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; 
	this.basket[i]=new Segment(conditionSelected);
	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>";
  
  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;
    
    if (no%2==0) segTable += "<tr>"; else segTable += "<tr class='trAlt2'>";
    segTable += "<td>"+no+".</td>";
    segTable += "<td nowrap width='90%'>";
    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><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 Segment(conditionSelected)
{
	this.active            = "Yes";
  this.conditionSelected = conditionSelected;
}

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

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

Error message is Error: this.basket[index].setCondition is not a function. The error pointed to the red highlighted in the line above.
Please advise.

Thanks

[AussieJohn]

Since you're calling this.basked[index].setCondition() from within an event handler, the `this` value for that scope would not be the detailTable object, but rather the element that the event occurred on.

In this case you could probably reference detailTable.basket instead of this.basket (it all depends on how you use detailTable - I don't see it being instantiated anywhere)