Login or Sign up Help | Site Map
Connecting Tech Pros Worldwide
Bytes > Archives > JavaScript

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

Question posted by: kie (Guest) on July 20th, 2005 10:53 AM
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
Would you like to answer this question?
Sign up for a free account, or Login (if you're already a member).
Lasse Reichstein Nielsen's Avatar
Lasse Reichstein Nielsen
Guest
n/a Posts
July 20th, 2005
10:54 AM
#2

Re: createElement('input').onchange assigned function passing 'this' values
Join Bytes! (kie) writes:
[color=blue]
> 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?[/color]

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 - Join Bytes!
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'
W d'Anjos's Avatar
W d'Anjos
Guest
n/a Posts
July 20th, 2005
10:55 AM
#3

Re: createElement('input').onchange assigned function passing 'this' values
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

Join Bytes! (kie) wrote in message news:<5849b244.0310011250.1e2fd4ef@posting.google.com>...[color=blue]
> 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[/color]
 
Not the answer you were looking for? Post your question . . .
183,813 Experts ready to help you find a solution.
Sign up for a free account, or Login (if you're already a member).

Latest Articles: Read & Comment
  • Didn't find the answer you were looking for?
    Post Your Question
    • Top Community Contributors
    Quick Browse:
    Communities / Archives
    XML / CSS | HTML | Javascript | PHP | Perl | Visual Basic | Python | C++ / C | Java | .NET / C# / VB / XML / ASP.net | ASP
    PostgreSQL | MS SQL | Oracle | IBM DB2 | MS Access | MySQL

    About Bytes | Sitemap | Privacy Policy | Terms of Use
    Copyright 1995-2008 Bytes.com. All rights Reserved