SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2011
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    "this" keyword not working

    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>

  2. #2
    SitePoint Enthusiast
    Join Date
    Mar 2011
    Location
    Bs. As. - Argentina
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •