"this" keyword not working

**gloosemo** · Mar 22, 2011 11:30

When this page loads the table should fill using onload="fillTable()" with 4 rows from an array called foodArray. Each row gets a grab button assigned with a unique id. Then when you click on one of the buttons, it should call function addRow. In addRow, i'm trying to use the this keyword to refer to the button that called it, then use an alert window to show the button id. but when the script runs, alert is not giving the id its just a blank alert window. whats wrong with it?

Thanks, Geoff

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">

</style>

<link href="basicstyle.css" rel="stylesheet" type="text/css" />
<link href="tablestyle.css" rel="stylesheet" type="text/css" />
<link href="advancestyle.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">

var food1 = new Array("-", "Boneless Chicken Breast", "M&M", "Meat & Alternatives", "1 breast", "125g", 110, 2, 0.5, 0, 65, 650, 0, 0, 0, 22);
var food2 = new Array("-", "Teriyaki Style Rice", "Uncle Ben's Fast & Fancy", "Grain Products", "1/4 package", "44g", 160, 0.5, 0.2, 0.1, 0, 520, 34, 0, 4, 3);
var food3 = new Array("-", "Whole Kernel Corn", "Irrestibles", "Fruit & Vegetables", "1/2 cup", "125mL", 80, 0.5, 0, 0, 0, 10, 15, 2, 1, 2);
var food4 = new Array("-", "Ketchup", "Heinz", "Condiments", "1 tbsp", "15mL", 20, 0, 0, 0, 0, 140, 5, 0, 4, 0.3);
var foodArray = [food1, food2, food3, food4];

var buttonValue = "Grab";
var onclickString = "addRow()";

//**************************************same fillTable as in aisle1************************************
function fillTable( arr, p ) {
	//fill the output table with whatever array is passed to it in form of arr parameter.
	outputTableRows = 5;
	outputTableColumns = 16;

	for (var x = 0; x < outputTableRows; x++) {

		var xPage = (x + 5 * (p - 1));

		for (var y = 0; y < outputTableColumns; y++) {		
			//set id variable in order to refer to each cell in the output table by this id.
			var id = x + "_" + y;

			if ( (arr.length > xPage) && (arr[xPage][y] != undefined) ) {
				//if its the first column, put in a button, or else put in the resultArray[x][y] value in the output table cell.
				if (y == 0) 
					document.getElementById(id).innerHTML = "<input id=\"b" + id + "\" type=\"button\" value=\"" + buttonValue + "\" onclick=\"" + onclickString + "\">"; 
				else 
					document.getElementById(id).innerHTML = arr[xPage][y];
			//else if the resultArray entry is undedefined, just put in a dash in the output table cell.							
			} else {
				document.getElementById(id).innerHTML = "-";
			}
		}			
	}		
}

function addRow ( e ) {
	if (!e) 
		var e = window.event;

	alert ("Add row");
	alert (this.id);

	var insertFoodRow = "";
	var t2body = document.getElementById("t2body");
	var row = document.createElement("tr");

}



</script>

</head>



<body onload="fillTable( foodArray, 1 )">

<div id="dcontainer" class="type3div"> 

  <div id="dheader" class="type2div">
		<div id="dlogo" class="type1div"></div>
    <div id="dlogin" class="type1div"></div>  
  </div>
    
	<div id="dmenubar" class="type2div">
  	<a href=""><div id="dmenu1" class="navigation">Page 1</div></a>
		<a href=""><div id="dmenu2" class="navigation">Page 2</div></a>
  	<a href=""><div id="dmenu3" class="navigation">Page 3</div></a>
		<a href=""><div id="dmenu4" class="navigation">Page 4</div></a>
		<a href=""><div id="dmenu5" class="navigation">Page 5</div></a>
	</div>

	<div id="dcontent" class="type2div">
		<h1>Grocery Store - Aisle 3:</h1>
		<h2>Make a combo or recipe</h2>
		
		<div id="content1" class="type1div">

			<div id="table2" class="outputTable">
				
				<table border="1">
					<thead>
						<tr>
							<th class="tableHeadMediumCenter">Edit</th>
							<th class="tableHeadLargeLeft">Food</th>
							<th class="tableHeadLargeLeft">Brand</th>
							<th class="tableHeadLargeLeft">Food Type</th>
							<th class="tableHeadLargeLeft">Serving Amount</th>
							<th class="tableHeadSmallCenter">SS</th>
							<th class="tableHeadSmallCenter">Cal</th>
							<th class="tableHeadSmallCenter">Fat</th>
							<th class="tableHeadSmallCenter">Sat</th>
							<th class="tableHeadSmallCenter">Trans</th>
							<th class="tableHeadSmallCenter">Chol</th>
							<th class="tableHeadSmallCenter">Sod</th>
							<th class="tableHeadSmallCenter">Carb</th>
							<th class="tableHeadSmallCenter">Fib</th>
							<th class="tableHeadSmallCenter">Sug</th>
							<th class="tableHeadSmallCenter">Pro</th>
						</tr>
					</thead>

					<tbody id="t2body">
						
					</tbody>
				
				</table>			
	
			</div>

		</div>

		<br />
		<div id="content2" class="type1div">
		
			<div id="table1" class="outputTable">
				
				<table border="1">
					<thead>
						<tr>
							<th class="tableHeadMediumCenter">Edit</th>
							<th class="tableHeadLargeLeft">Food</th>
							<th class="tableHeadLargeLeft">Brand</th>
							<th class="tableHeadLargeLeft">Food Type</th>
							<th class="tableHeadLargeLeft">Serving Amount</th>
							<th class="tableHeadSmallCenter">SS</th>
							<th class="tableHeadSmallCenter">Cal</th>
							<th class="tableHeadSmallCenter">Fat</th>
							<th class="tableHeadSmallCenter">Sat</th>
							<th class="tableHeadSmallCenter">Trans</th>
							<th class="tableHeadSmallCenter">Chol</th>
							<th class="tableHeadSmallCenter">Sod</th>
							<th class="tableHeadSmallCenter">Carb</th>
							<th class="tableHeadSmallCenter">Fib</th>
							<th class="tableHeadSmallCenter">Sug</th>
							<th class="tableHeadSmallCenter">Pro</th>
						</tr>
					</thead>

					<tbody>
						<tr>
							<td id="0_0" class="tableCellCenterTop">-</td>
							<td id="0_1" class="tableCellLeftTop">-</td>
							<td id="0_2" class="tableCellLeftTop">-</td>
							<td id="0_3" class="tableCellLeftTop">-</td>
							<td id="0_4" class="tableCellLeftTop">-</td>
							<td id="0_5" class="tableCellCenterTop">-</td>
							<td id="0_6" class="tableCellCenterTop">-</td>
							<td id="0_7" class="tableCellCenterTop">-</td>
							<td id="0_8" class="tableCellCenterTop">-</td>
							<td id="0_9" class="tableCellCenterTop">-</td>
							<td id="0_10" class="tableCellCenterTop">-</td>
							<td id="0_11" class="tableCellCenterTop">-</td>
							<td id="0_12" class="tableCellCenterTop">-</td>
							<td id="0_13" class="tableCellCenterTop">-</td>
							<td id="0_14" class="tableCellCenterTop">-</td>
							<td id="0_15" class="tableCellCenterTop">-</td>
						</tr>
						<tr>
							<td id="1_0" class="tableCellCenterTop">-</td>
							<td id="1_1" class="tableCellLeftTop">-</td>
							<td id="1_2" class="tableCellLeftTop">-</td>
							<td id="1_3" class="tableCellLeftTop">-</td>
							<td id="1_4" class="tableCellLeftTop">-</td>
							<td id="1_5" class="tableCellCenterTop">-</td>
							<td id="1_6" class="tableCellCenterTop">-</td>
							<td id="1_7" class="tableCellCenterTop">-</td>
							<td id="1_8" class="tableCellCenterTop">-</td>
							<td id="1_9" class="tableCellCenterTop">-</td>
							<td id="1_10" class="tableCellCenterTop">-</td>
							<td id="1_11" class="tableCellCenterTop">-</td>
							<td id="1_12" class="tableCellCenterTop">-</td>
							<td id="1_13" class="tableCellCenterTop">-</td>
							<td id="1_14" class="tableCellCenterTop">-</td>
							<td id="1_15" class="tableCellCenterTop">-</td>
						</tr>
						<tr>
							<td id="2_0" class="tableCellCenterTop">-</td>
							<td id="2_1" class="tableCellLeftTop">-</td>
							<td id="2_2" class="tableCellLeftTop">-</td>
							<td id="2_3" class="tableCellLeftTop">-</td>
							<td id="2_4" class="tableCellLeftTop">-</td>
							<td id="2_5" class="tableCellCenterTop">-</td>
							<td id="2_6" class="tableCellCenterTop">-</td>
							<td id="2_7" class="tableCellCenterTop">-</td>
							<td id="2_8" class="tableCellCenterTop">-</td>
							<td id="2_9" class="tableCellCenterTop">-</td>
							<td id="2_10" class="tableCellCenterTop">-</td>
							<td id="2_11" class="tableCellCenterTop">-</td>
							<td id="2_12" class="tableCellCenterTop">-</td>
							<td id="2_13" class="tableCellCenterTop">-</td>
							<td id="2_14" class="tableCellCenterTop">-</td>
							<td id="2_15" class="tableCellCenterTop">-</td>
						</tr>
						<tr>
							<td id="3_0" class="tableCellCenterTop">-</td>
							<td id="3_1" class="tableCellLeftTop">-</td>
							<td id="3_2" class="tableCellLeftTop">-</td>
							<td id="3_3" class="tableCellLeftTop">-</td>
							<td id="3_4" class="tableCellLeftTop">-</td>
							<td id="3_5" class="tableCellCenterTop">-</td>
							<td id="3_6" class="tableCellCenterTop">-</td>
							<td id="3_7" class="tableCellCenterTop">-</td>
							<td id="3_8" class="tableCellCenterTop">-</td>
							<td id="3_9" class="tableCellCenterTop">-</td>
							<td id="3_10" class="tableCellCenterTop">-</td>
							<td id="3_11" class="tableCellCenterTop">-</td>
							<td id="3_12" class="tableCellCenterTop">-</td>
							<td id="3_13" class="tableCellCenterTop">-</td>
							<td id="3_14" class="tableCellCenterTop">-</td>
							<td id="3_15" class="tableCellCenterTop">-</td>
						</tr>
						<tr>
							<td id="4_0" class="tableCellCenterTop">-</td>
							<td id="4_1" class="tableCellLeftTop">-</td>
							<td id="4_2" class="tableCellLeftTop">-</td>
							<td id="4_3" class="tableCellLeftTop">-</td>
							<td id="4_4" class="tableCellLeftTop">-</td>
							<td id="4_5" class="tableCellCenterTop">-</td>
							<td id="4_6" class="tableCellCenterTop">-</td>
							<td id="4_7" class="tableCellCenterTop">-</td>
							<td id="4_8" class="tableCellCenterTop">-</td>
							<td id="4_9" class="tableCellCenterTop">-</td>
							<td id="4_10" class="tableCellCenterTop">-</td>
							<td id="4_11" class="tableCellCenterTop">-</td>
							<td id="4_12" class="tableCellCenterTop">-</td>
							<td id="4_13" class="tableCellCenterTop">-</td>
							<td id="4_14" class="tableCellCenterTop">-</td>
							<td id="4_15" class="tableCellCenterTop">-</td>
						</tr>
					</tbody>
				
				</table>			
	
      </div>
  
    </div>
  
  </div>

</div>

</body>

</html>

**pablogo** · Mar 22, 2011 11:46

You should get the object originating the event, here i have updated your code.

Code JavaScript:

function addRow ( e ) {
	if (!e) 
        {  //ie browser
		var e = window.event;
                var o = e.srcElement;
        }else{  //gecko 
                var o = e.currentTarget;
        }
 
	alert ("Add row");
	alert (o.id);
	var insertFoodRow = "";
	var t2body = document.getElementById("t2body");
	var row = document.createElement("tr");
}

See the o object that is created from the "e" (event object) depending of the browser. So, then o will be a reference to the object that throws the event.

See you

User Tag List

Thread: "this" keyword not working

Thread Tools

Display

"this" keyword not working

Bookmarks

Bookmarks

Posting Permissions