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

Discussion in 'Javascript' started by kie, Oct 1, 2003.

  1. kie

    kie Guest

    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
     
    kie, Oct 1, 2003
    #1
    1. Advertisements

  2. 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, Oct 2, 2003
    #2
    1. Advertisements

  3. kie

    W d'Anjos Guest

    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

     
    W d'Anjos, Oct 2, 2003
    #3
    1. Advertisements

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 (here). After that, you can post your question and our members will help you out.