Connecting Tech Pros Worldwide Help | Site Map
bytes > groups > JavaScript

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

 
LinkBack Thread Tools Search this Thread
  #1  
Old July 20th, 2005, 10:53 AM
kie
Guest
  
Posts: n/a
Default createElement('input').onchange assigned function passing 'this' values
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

  #2  
Old July 20th, 2005, 10:54 AM
Lasse Reichstein Nielsen
Guest
  
Posts: n/a
Default Re: createElement('input').onchange assigned function passing 'this' values
kiedrea@yahoo.com (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 - lrn@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'
  #3  
Old July 20th, 2005, 10:55 AM
W d'Anjos
Guest
  
Posts: n/a
Default 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

kiedrea@yahoo.com (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]
 

Bookmarks

« Previous Thread | Next Thread »
Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Popular Articles

What is Bytes?

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 220,662 network members.
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