By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,846 Members | 1,589 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,846 IT Pros & Developers. It's quick & easy.

createElement('input').onchange assigned function passing 'this' values

P: n/a
kie
hello,

when i create elements and want to assign events to them, i have
realised that if the function assigned to that element has no
parameters, then the parent node values can be attained.

e.g.

aTextBox=document.createElement('input');
aTextBox.onchange=calculateOneRow2;

will enable the function "calculateOneRow2" to draw on the
"this.parentNode;" object.

if however i pass a variable, for example:

aTextBox.onchange=function(){calculateOneRow2(5);} ;

then anything attached to "this." doesn't exist. i'm sure this is
fundamental javascript programming, can anyone tell me why this is, or
even how to gain access to the parentNode while at the same time
passing variables to a function?

i'd greatly appreciate any pointers, here's the code.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<script type="text/javaScript" >
<!--
var globalClaimLnsRowNum = 1;
function detail_row(s_quantity,s_incl_uplift)
{
var body=document.body;
var Table,theRow,aCell,aTextBox,tablebody2,rowSec2;
var theTable;

var rowSec1,currenttext;
var opt1,sel2;
var cellSec1,cellSec2,cellSec3,cellSec4,cellSec5;
var cellSec6,cellSec7,cellSec8,cellSec9,cellSec10;
var formation = document.getElementById('formation');
var tablebody2=formation.getElementsByTagName('tbody')[0];
rowSec1=document.createElement('TR');
cellSec1=document.createElement('TD');
currenttext=document.createTextNode('Intitul');
rowSec2=document.createElement('TR');
rowSec2.id = 'row_' + globalClaimLnsRowNum;

cellSec5=document.createElement('TD');
aTextBox=document.createElement('input');
aTextBox.type = 'text';
aTextBox.value = s_quantity;
aTextBox.id = 'txt_cell_one_' +
globalClaimLnsRowNum;
aTextBox.name = 'txt_cell_one_' +
globalClaimLnsRowNum;
aTextBox.onchange=calculateOneRow2;
cellSec5.appendChild(aTextBox);
rowSec2.appendChild(cellSec5);

cellSec8=document.createElement('TD');
aTextBox=document.createElement('input');
aTextBox.type = 'text';
aTextBox.value = s_incl_uplift;
aTextBox.id = 'txt_cell_two_' +
globalClaimLnsRowNum;
aTextBox.name = 'txt_cell_two_' +
globalClaimLnsRowNum;
aTextBox.onchange=calculateOneRow2;
cellSec8.appendChild(aTextBox);
rowSec2.appendChild(cellSec8);

cellSec10=document.createElement('TD');
ButtonSupprimer=document.createElement('input');
ButtonSupprimer.type = 'button';
ButtonSupprimer.id = 'cmd_del' +
globalClaimLnsRowNum;
ButtonSupprimer.name = 'cmd_del' +
globalClaimLnsRowNum;
ButtonSupprimer.value = 'remove';
ButtonSupprimer.onclick=removeRow;
cellSec10.appendChild(ButtonSupprimer);
rowSec2.appendChild(cellSec10);

tablebody2.appendChild(rowSec2);
formation.appendChild(tablebody2);
globalClaimLnsRowNum = globalClaimLnsRowNum + 1;
}

function invoice_row(s_invoice_no,s_invoice_amount)
{
var body=document.body;
var Table,theRow,aCell,aTextBox,tablebody2,rowSec2;
var theTable;
var rowSec1,currenttext;
var opt1,sel2;
var cellSec1,cellSec2,cellSec3,cellSec4,cellSec5;
var cellSec6,cellSec7,cellSec8,cellSec9,cellSec10;
var formation = document.getElementById('formationInvoice');
var tablebody2=formation.getElementsByTagName('tbody')[0];
rowSec1=document.createElement('TR');
cellSec1=document.createElement('TD');
currenttext=document.createTextNode('Intitul');
rowSec2=document.createElement('TR');
rowSec2.id = 'row_' + globalClaimLnsRowNum;

cellSec1=document.createElement('TD');
aTextBox=document.createElement('input');
aTextBox.type = 'text';
aTextBox.value = s_invoice_no;
aTextBox.name = 'txt_cell_three_' +
globalClaimLnsRowNum;
aTextBox.id = 'txt_cell_three_' + globalClaimLnsRowNum;
aTextBox.onchange=function(){calculateOneRow2(5);} ;
cellSec1.appendChild(aTextBox);
rowSec2.appendChild(cellSec1);

cellSec5=document.createElement('TD');
aTextBox=document.createElement('input');
aTextBox.type = 'text';
aTextBox.value = s_invoice_amount;
aTextBox.id = 'txt_cell_four_' +
globalClaimLnsRowNum;
aTextBox.name = 'txt_cell_four_' +
globalClaimLnsRowNum;
aTextBox.onchange=function(){calculateOneRow2(5);} ;
cellSec5.appendChild(aTextBox);
rowSec2.appendChild(cellSec5);
cellSec10=document.createElement('TD');
ButtonSupprimer=document.createElement('input');
ButtonSupprimer.id = 'five_invoice_del' +
globalClaimLnsRowNum;
ButtonSupprimer.name = 'five_invoice_del' +
globalClaimLnsRowNum;
ButtonSupprimer.type = 'button';
ButtonSupprimer.value = 'del';
ButtonSupprimer.onclick=removeRow;
cellSec10.appendChild(ButtonSupprimer);
rowSec2.appendChild(cellSec10);

tablebody2.appendChild(rowSec2);
formation.appendChild(tablebody2);
globalClaimLnsRowNum = globalClaimLnsRowNum + 1;
}

function calculateOneRow1(){ // for element within row id "row_xxxx"
var n_Tab = "either";

for( var node = this.parentNode; node; node=node.parentNode){
if(node.tagName=="TR"){
alert('Table:' + n_Tab + ', row:' + node.id.substring(4))
}
}
}
function calculateOneRow2(n_Tab){ // for element within row id
"row_xxxx"

for( var node = this.parentNode; node; node=node.parentNode){
if(node.tagName=="TR"){
alert('Table:' + n_Tab + ', row:' + node.id.substring(4))
}
}
}
function removeRow() // method of form element within row
{
for( var node = this.parentNode; node; node=node.parentNode)
if(node.tagName=="TR"){
node.parentNode.removeChild(node);
break;
}
}
function removeAllRowsAllTables(){} // fucntion to remove all rows
from all detail tables

function buttonAction(nButton)
{
var bStatus = true;
var oForm = document.forms[0];
switch (nButton)
{
case 1: // table1
break;
case 2: // table2
break;
case 2: // both tables
break;
default:
bStatus = false;
}
return (bStatus);
}
//endhide -->
</script>
</HEAD>
<BODY>
<form method="post" action="" id="form1" name="form1">
<table>
<tr>
<td> <input name='cmd_detail_new' type='button'
id='cmd_detail_new' value='add row table1' onclick=detail_row('','');>
</td>
<td> <input name='cmd_invoice' type='button' id='cmd_invoice'
value='add row table2' onclick=invoice_row('','');> </td>
<td> <input name='cmd_all' type='button' id='cmd_all'
value='REMOVE ALL ROWS, ALL TABLES' onclick=removeAllRowsAllTables();>
</td>
</tr>
</table>
<br>
<br>
<table>
<tr>
<td height='20' valign='top'> <table width='100%' border='1'
cellpadding='0' cellspacing='0' valign='top' id='formation'>
<thead>
<tr>
<td colspan='8'><b>TABLE1<b></td>
</tr>
<tr>
<td width='15%'>&nbsp;<b>GOODS</b></td>
<td width='5%'>&nbsp;<b>UNIT PRICE</b></td>
<td width='5%'>&nbsp;<b>&nbsp;</b></td>
</tr>
</thead> <tbody> </tbody>
</table>
</tr>
</table>
<br>
<table>
<tr>
<td height='20' valign='top'> <table width='100%' border='1'
cellpadding='0' cellspacing='0' valign='top' id='formationInvoice'>
<thead>
<tr>
<td colspan='8'><b>TABLE2<b></td>
</tr>
<tr>
<td width='15%'>&nbsp;INVOICE NUMBER</td>
<td width='5%'>&nbsp;INVOICE DATE</td>
<td>&nbsp;</td>
</tr>
</thead>
<tbody> </tbody>
</table></td>
</tr>
</table>
</form>
</body>
</html>

thanks for any help, kie
Jul 20 '05 #1
Share this Question
Share on Google+
2 Replies


P: n/a
ki*****@yahoo.com (kie) writes:
if however i pass a variable, for example:

aTextBox.onchange=function(){calculateOneRow2(5);} ;

then anything attached to "this." doesn't exist. i'm sure this is
fundamental javascript programming, can anyone tell me why this is, or
even how to gain access to the parentNode while at the same time
passing variables to a function?


It is indeed fundamental Javascript programming (and some would say
that it is stupid design on the parts of Javascript, but alas, it
is now how it works).

Whenever you call a function as a method "foo.func()", it is evaluated
by first finding the Reference value of "foo.func", which is a value
remembering the object "foo" and the name "func", and then calling
the "func" property of the object with "this" pointing to "foo".

When you call a function directly, like "func()", there is no object
to assign to the "this" of func. Javascript then defaults to using the
global object. Some of us would have preferred it to default to the
current value of "this", which would have made your code work. Maybe
it's just 20-20 hindsight :)

If you need to transfer the object, you have two options:
1) Add an extra argument to the function and call it as
function(){calculateOneRow2(this,5);}
2) Set the "this" value of the call explicitly with the call
method of the function object:
function(){calculateOneRow2.call(this,5);}

Good luck
/L

Next time, trim the code to a not-so-large example that exhibits the problem.
/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'
Jul 20 '05 #2

P: n/a
Try:

aTextBox.onchange=function(){calculateOneRow2(this ,5);};

function calculateOneRow2(t,n_Tab){
for( var node = t.parentNode; node; node=node.parentNode){
if(node.tagName=="TR"){
alert('Table:' + n_Tab + ', row:' + node.id.substring(4))
}
}
}
I hope this helps.

Wagner

ki*****@yahoo.com (kie) wrote in message news:<58**************************@posting.google. com>...
hello,

when i create elements and want to assign events to them, i have
realised that if the function assigned to that element has no
parameters, then the parent node values can be attained.

e.g.

aTextBox=document.createElement('input');
aTextBox.onchange=calculateOneRow2;

will enable the function "calculateOneRow2" to draw on the
"this.parentNode;" object.

if however i pass a variable, for example:

aTextBox.onchange=function(){calculateOneRow2(5);} ;

then anything attached to "this." doesn't exist. i'm sure this is
fundamental javascript programming, can anyone tell me why this is, or
even how to gain access to the parentNode while at the same time
passing variables to a function?

i'd greatly appreciate any pointers, here's the code.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<script type="text/javaScript" >
<!--
var globalClaimLnsRowNum = 1;
function detail_row(s_quantity,s_incl_uplift)
{
var body=document.body;
var Table,theRow,aCell,aTextBox,tablebody2,rowSec2;
var theTable;

var rowSec1,currenttext;
var opt1,sel2;
var cellSec1,cellSec2,cellSec3,cellSec4,cellSec5;
var cellSec6,cellSec7,cellSec8,cellSec9,cellSec10;
var formation = document.getElementById('formation');
var tablebody2=formation.getElementsByTagName('tbody')[0];
rowSec1=document.createElement('TR');
cellSec1=document.createElement('TD');
currenttext=document.createTextNode('Intitul');
rowSec2=document.createElement('TR');
rowSec2.id = 'row_' + globalClaimLnsRowNum;

cellSec5=document.createElement('TD');
aTextBox=document.createElement('input');
aTextBox.type = 'text';
aTextBox.value = s_quantity;
aTextBox.id = 'txt_cell_one_' +
globalClaimLnsRowNum;
aTextBox.name = 'txt_cell_one_' +
globalClaimLnsRowNum;
aTextBox.onchange=calculateOneRow2;
cellSec5.appendChild(aTextBox);
rowSec2.appendChild(cellSec5);

cellSec8=document.createElement('TD');
aTextBox=document.createElement('input');
aTextBox.type = 'text';
aTextBox.value = s_incl_uplift;
aTextBox.id = 'txt_cell_two_' +
globalClaimLnsRowNum;
aTextBox.name = 'txt_cell_two_' +
globalClaimLnsRowNum;
aTextBox.onchange=calculateOneRow2;
cellSec8.appendChild(aTextBox);
rowSec2.appendChild(cellSec8);

cellSec10=document.createElement('TD');
ButtonSupprimer=document.createElement('input');
ButtonSupprimer.type = 'button';
ButtonSupprimer.id = 'cmd_del' +
globalClaimLnsRowNum;
ButtonSupprimer.name = 'cmd_del' +
globalClaimLnsRowNum;
ButtonSupprimer.value = 'remove';
ButtonSupprimer.onclick=removeRow;
cellSec10.appendChild(ButtonSupprimer);
rowSec2.appendChild(cellSec10);

tablebody2.appendChild(rowSec2);
formation.appendChild(tablebody2);
globalClaimLnsRowNum = globalClaimLnsRowNum + 1;
}

function invoice_row(s_invoice_no,s_invoice_amount)
{
var body=document.body;
var Table,theRow,aCell,aTextBox,tablebody2,rowSec2;
var theTable;
var rowSec1,currenttext;
var opt1,sel2;
var cellSec1,cellSec2,cellSec3,cellSec4,cellSec5;
var cellSec6,cellSec7,cellSec8,cellSec9,cellSec10;
var formation = document.getElementById('formationInvoice');
var tablebody2=formation.getElementsByTagName('tbody')[0];
rowSec1=document.createElement('TR');
cellSec1=document.createElement('TD');
currenttext=document.createTextNode('Intitul');
rowSec2=document.createElement('TR');
rowSec2.id = 'row_' + globalClaimLnsRowNum;

cellSec1=document.createElement('TD');
aTextBox=document.createElement('input');
aTextBox.type = 'text';
aTextBox.value = s_invoice_no;
aTextBox.name = 'txt_cell_three_' +
globalClaimLnsRowNum;
aTextBox.id = 'txt_cell_three_' + globalClaimLnsRowNum;
aTextBox.onchange=function(){calculateOneRow2(5);} ;
cellSec1.appendChild(aTextBox);
rowSec2.appendChild(cellSec1);

cellSec5=document.createElement('TD');
aTextBox=document.createElement('input');
aTextBox.type = 'text';
aTextBox.value = s_invoice_amount;
aTextBox.id = 'txt_cell_four_' +
globalClaimLnsRowNum;
aTextBox.name = 'txt_cell_four_' +
globalClaimLnsRowNum;
aTextBox.onchange=function(){calculateOneRow2(5);} ;
cellSec5.appendChild(aTextBox);
rowSec2.appendChild(cellSec5);
cellSec10=document.createElement('TD');
ButtonSupprimer=document.createElement('input');
ButtonSupprimer.id = 'five_invoice_del' +
globalClaimLnsRowNum;
ButtonSupprimer.name = 'five_invoice_del' +
globalClaimLnsRowNum;
ButtonSupprimer.type = 'button';
ButtonSupprimer.value = 'del';
ButtonSupprimer.onclick=removeRow;
cellSec10.appendChild(ButtonSupprimer);
rowSec2.appendChild(cellSec10);

tablebody2.appendChild(rowSec2);
formation.appendChild(tablebody2);
globalClaimLnsRowNum = globalClaimLnsRowNum + 1;
}

function calculateOneRow1(){ // for element within row id "row_xxxx"
var n_Tab = "either";

for( var node = this.parentNode; node; node=node.parentNode){
if(node.tagName=="TR"){
alert('Table:' + n_Tab + ', row:' + node.id.substring(4))
}
}
}
function calculateOneRow2(n_Tab){ // for element within row id
"row_xxxx"

for( var node = this.parentNode; node; node=node.parentNode){
if(node.tagName=="TR"){
alert('Table:' + n_Tab + ', row:' + node.id.substring(4))
}
}
}
function removeRow() // method of form element within row
{
for( var node = this.parentNode; node; node=node.parentNode)
if(node.tagName=="TR"){
node.parentNode.removeChild(node);
break;
}
}
function removeAllRowsAllTables(){} // fucntion to remove all rows
from all detail tables

function buttonAction(nButton)
{
var bStatus = true;
var oForm = document.forms[0];
switch (nButton)
{
case 1: // table1
break;
case 2: // table2
break;
case 2: // both tables
break;
default:
bStatus = false;
}
return (bStatus);
}
//endhide -->
</script>
</HEAD>
<BODY>
<form method="post" action="" id="form1" name="form1">
<table>
<tr>
<td> <input name='cmd_detail_new' type='button'
id='cmd_detail_new' value='add row table1' onclick=detail_row('','');>
</td>
<td> <input name='cmd_invoice' type='button' id='cmd_invoice'
value='add row table2' onclick=invoice_row('','');> </td>
<td> <input name='cmd_all' type='button' id='cmd_all'
value='REMOVE ALL ROWS, ALL TABLES' onclick=removeAllRowsAllTables();>
</td>
</tr>
</table>
<br>
<br>
<table>
<tr>
<td height='20' valign='top'> <table width='100%' border='1'
cellpadding='0' cellspacing='0' valign='top' id='formation'>
<thead>
<tr>
<td colspan='8'><b>TABLE1<b></td>
</tr>
<tr>
<td width='15%'>&nbsp;<b>GOODS</b></td>
<td width='5%'>&nbsp;<b>UNIT PRICE</b></td>
<td width='5%'>&nbsp;<b>&nbsp;</b></td>
</tr>
</thead> <tbody> </tbody>
</table>
</tr>
</table>
<br>
<table>
<tr>
<td height='20' valign='top'> <table width='100%' border='1'
cellpadding='0' cellspacing='0' valign='top' id='formationInvoice'>
<thead>
<tr>
<td colspan='8'><b>TABLE2<b></td>
</tr>
<tr>
<td width='15%'>&nbsp;INVOICE NUMBER</td>
<td width='5%'>&nbsp;INVOICE DATE</td>
<td>&nbsp;</td>
</tr>
</thead>
<tbody> </tbody>
</table></td>
</tr>
</table>
</form>
</body>
</html>

thanks for any help, kie

Jul 20 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.