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

K

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
 
L

Lasse Reichstein Nielsen

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?
Click to expand...

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
 
W

W d'Anjos

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

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
Click to expand...
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

I am using 2 loops, 1 for input and 1 for td. Can we achieve the same functionality with 1 loop in Jquery? 4
Only one table shows up with the information 2
How can I calculate the last payment of the year to be the sum of all previous payments for that year and subtracting it from Research Costs value? 7
calculating in table made by createElement and appendChild 25
Filter table rows based on multiple checkboxes value 2
How can I create a table using the input element? 1
calculations using createElement input text boxes in a table 2
Angularjs newbie - second JSON datasource does not display 0

Members online

No members online now.
Total: 53 (members: 0, guests: 53)
Robots: 185

Forum statistics

Threads
473,764
Messages
2,569,564
Members
45,039
Latest member
CasimiraVa

Latest Threads

Top