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

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • kie
    #1

    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=docume nt.createElemen t('input');
    aTextBox.onchan ge=calculateOne Row2;

    will enable the function "calculateOneRo w2" to draw on the
    "this.parentNod e;" object.

    if however i pass a variable, for example:

    aTextBox.onchan ge=function(){c alculateOneRow2 (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 globalClaimLnsR owNum = 1;
    function detail_row(s_qu antity,s_incl_u plift)
    {
    var body=document.b ody;
    var Table,theRow,aC ell,aTextBox,ta blebody2,rowSec 2;
    var theTable;

    var rowSec1,current text;
    var opt1,sel2;
    var cellSec1,cellSe c2,cellSec3,cel lSec4,cellSec5;
    var cellSec6,cellSe c7,cellSec8,cel lSec9,cellSec10 ;
    var formation = document.getEle mentById('forma tion');
    var tablebody2=form ation.getElemen tsByTagName('tb ody')[0];
    rowSec1=documen t.createElement ('TR');
    cellSec1=docume nt.createElemen t('TD');
    currenttext=doc ument.createTex tNode('Intitul' );
    rowSec2=documen t.createElement ('TR');
    rowSec2.id = 'row_' + globalClaimLnsR owNum;

    cellSec5=docume nt.createElemen t('TD');
    aTextBox=docume nt.createElemen t('input');
    aTextBox.type = 'text';
    aTextBox.value = s_quantity;
    aTextBox.id = 'txt_cell_one_' +
    globalClaimLnsR owNum;
    aTextBox.name = 'txt_cell_one_' +
    globalClaimLnsR owNum;
    aTextBox.onchan ge=calculateOne Row2;
    cellSec5.append Child(aTextBox) ;
    rowSec2.appendC hild(cellSec5);

    cellSec8=docume nt.createElemen t('TD');
    aTextBox=docume nt.createElemen t('input');
    aTextBox.type = 'text';
    aTextBox.value = s_incl_uplift;
    aTextBox.id = 'txt_cell_two_' +
    globalClaimLnsR owNum;
    aTextBox.name = 'txt_cell_two_' +
    globalClaimLnsR owNum;
    aTextBox.onchan ge=calculateOne Row2;
    cellSec8.append Child(aTextBox) ;
    rowSec2.appendC hild(cellSec8);

    cellSec10=docum ent.createEleme nt('TD');
    ButtonSupprimer =document.creat eElement('input ');
    ButtonSupprimer .type = 'button';
    ButtonSupprimer .id = 'cmd_del' +
    globalClaimLnsR owNum;
    ButtonSupprimer .name = 'cmd_del' +
    globalClaimLnsR owNum;
    ButtonSupprimer .value = 'remove';
    ButtonSupprimer .onclick=remove Row;
    cellSec10.appen dChild(ButtonSu pprimer);
    rowSec2.appendC hild(cellSec10) ;

    tablebody2.appe ndChild(rowSec2 );
    formation.appen dChild(tablebod y2);
    globalClaimLnsR owNum = globalClaimLnsR owNum + 1;
    }

    function invoice_row(s_i nvoice_no,s_inv oice_amount)
    {
    var body=document.b ody;
    var Table,theRow,aC ell,aTextBox,ta blebody2,rowSec 2;
    var theTable;
    var rowSec1,current text;
    var opt1,sel2;
    var cellSec1,cellSe c2,cellSec3,cel lSec4,cellSec5;
    var cellSec6,cellSe c7,cellSec8,cel lSec9,cellSec10 ;
    var formation = document.getEle mentById('forma tionInvoice');
    var tablebody2=form ation.getElemen tsByTagName('tb ody')[0];
    rowSec1=documen t.createElement ('TR');
    cellSec1=docume nt.createElemen t('TD');
    currenttext=doc ument.createTex tNode('Intitul' );
    rowSec2=documen t.createElement ('TR');
    rowSec2.id = 'row_' + globalClaimLnsR owNum;

    cellSec1=docume nt.createElemen t('TD');
    aTextBox=docume nt.createElemen t('input');
    aTextBox.type = 'text';
    aTextBox.value = s_invoice_no;
    aTextBox.name = 'txt_cell_three _' +
    globalClaimLnsR owNum;
    aTextBox.id = 'txt_cell_three _' + globalClaimLnsR owNum;
    aTextBox.onchan ge=function(){c alculateOneRow2 (5);};
    cellSec1.append Child(aTextBox) ;
    rowSec2.appendC hild(cellSec1);

    cellSec5=docume nt.createElemen t('TD');
    aTextBox=docume nt.createElemen t('input');
    aTextBox.type = 'text';
    aTextBox.value = s_invoice_amoun t;
    aTextBox.id = 'txt_cell_four_ ' +
    globalClaimLnsR owNum;
    aTextBox.name = 'txt_cell_four_ ' +
    globalClaimLnsR owNum;
    aTextBox.onchan ge=function(){c alculateOneRow2 (5);};
    cellSec5.append Child(aTextBox) ;
    rowSec2.appendC hild(cellSec5);
    cellSec10=docum ent.createEleme nt('TD');
    ButtonSupprimer =document.creat eElement('input ');
    ButtonSupprimer .id = 'five_invoice_d el' +
    globalClaimLnsR owNum;
    ButtonSupprimer .name = 'five_invoice_d el' +
    globalClaimLnsR owNum;
    ButtonSupprimer .type = 'button';
    ButtonSupprimer .value = 'del';
    ButtonSupprimer .onclick=remove Row;
    cellSec10.appen dChild(ButtonSu pprimer);
    rowSec2.appendC hild(cellSec10) ;

    tablebody2.appe ndChild(rowSec2 );
    formation.appen dChild(tablebod y2);
    globalClaimLnsR owNum = globalClaimLnsR owNum + 1;
    }

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

    for( var node = this.parentNode ; node; node=node.paren tNode){
    if(node.tagName =="TR"){
    alert('Table:' + n_Tab + ', row:' + node.id.substri ng(4))
    }
    }
    }
    function calculateOneRow 2(n_Tab){ // for element within row id
    "row_xxxx"

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

    function buttonAction(nB utton)
    {
    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_detai l_new' type='button'
    id='cmd_detail_ new' value='add row table1' onclick=detail_ row('','');>
    </td>
    <td> <input name='cmd_invoi ce' 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=removeA llRowsAllTables ();>
    </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%'>&nb sp;<b>GOODS</b></td>
    <td width='5%'>&nbs p;<b>UNIT PRICE</b></td>
    <td width='5%'>&nbs p;<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='formationIn voice'>
    <thead>
    <tr>
    <td colspan='8'><b> TABLE2<b></td>
    </tr>
    <tr>
    <td width='15%'>&nb sp;INVOICE NUMBER</td>
    <td width='5%'>&nbs p;INVOICE DATE</td>
    <td>&nbsp;</td>
    </tr>
    </thead>
    <tbody> </tbody>
    </table></td>
    </tr>
    </table>
    </form>
    </body>
    </html>

    thanks for any help, kie
    Tags: createelement javascript
    • Lasse Reichstein Nielsen
      #2
      Re: createElement(' input').onchang e assigned function passing 'this' values

      kiedrea@yahoo.c om (kie) writes:
      [color=blue]
      > if however i pass a variable, for example:
      >
      > aTextBox.onchan ge=function(){c alculateOneRow2 (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(){calc ulateOneRow2(th is,5);}
      2) Set the "this" value of the call explicitly with the call
      method of the function object:
      function(){calc ulateOneRow2.ca ll(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.'

        Comment

        • W d'Anjos
          #3
          Re: createElement(' input').onchang e assigned function passing 'this' values

          Try:

          aTextBox.onchan ge=function(){c alculateOneRow2 (this,5);};

          function calculateOneRow 2(t,n_Tab){
          for( var node = t.parentNode; node; node=node.paren tNode){
          if(node.tagName =="TR"){
          alert('Table:' + n_Tab + ', row:' + node.id.substri ng(4))
          }
          }
          }


          I hope this helps.

          Wagner

          kiedrea@yahoo.c om (kie) wrote in message news:<5849b244. 0310011250.1e2f d4ef@posting.go ogle.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=docume nt.createElemen t('input');
          > aTextBox.onchan ge=calculateOne Row2;
          >
          > will enable the function "calculateOneRo w2" to draw on the
          > "this.parentNod e;" object.
          >
          > if however i pass a variable, for example:
          >
          > aTextBox.onchan ge=function(){c alculateOneRow2 (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 globalClaimLnsR owNum = 1;
          > function detail_row(s_qu antity,s_incl_u plift)
          > {
          > var body=document.b ody;
          > var Table,theRow,aC ell,aTextBox,ta blebody2,rowSec 2;
          > var theTable;
          >
          > var rowSec1,current text;
          > var opt1,sel2;
          > var cellSec1,cellSe c2,cellSec3,cel lSec4,cellSec5;
          > var cellSec6,cellSe c7,cellSec8,cel lSec9,cellSec10 ;
          > var formation = document.getEle mentById('forma tion');
          > var tablebody2=form ation.getElemen tsByTagName('tb ody')[0];
          > rowSec1=documen t.createElement ('TR');
          > cellSec1=docume nt.createElemen t('TD');
          > currenttext=doc ument.createTex tNode('Intitul' );
          > rowSec2=documen t.createElement ('TR');
          > rowSec2.id = 'row_' + globalClaimLnsR owNum;
          >
          > cellSec5=docume nt.createElemen t('TD');
          > aTextBox=docume nt.createElemen t('input');
          > aTextBox.type = 'text';
          > aTextBox.value = s_quantity;
          > aTextBox.id = 'txt_cell_one_' +
          > globalClaimLnsR owNum;
          > aTextBox.name = 'txt_cell_one_' +
          > globalClaimLnsR owNum;
          > aTextBox.onchan ge=calculateOne Row2;
          > cellSec5.append Child(aTextBox) ;
          > rowSec2.appendC hild(cellSec5);
          >
          > cellSec8=docume nt.createElemen t('TD');
          > aTextBox=docume nt.createElemen t('input');
          > aTextBox.type = 'text';
          > aTextBox.value = s_incl_uplift;
          > aTextBox.id = 'txt_cell_two_' +
          > globalClaimLnsR owNum;
          > aTextBox.name = 'txt_cell_two_' +
          > globalClaimLnsR owNum;
          > aTextBox.onchan ge=calculateOne Row2;
          > cellSec8.append Child(aTextBox) ;
          > rowSec2.appendC hild(cellSec8);
          >
          > cellSec10=docum ent.createEleme nt('TD');
          > ButtonSupprimer =document.creat eElement('input ');
          > ButtonSupprimer .type = 'button';
          > ButtonSupprimer .id = 'cmd_del' +
          > globalClaimLnsR owNum;
          > ButtonSupprimer .name = 'cmd_del' +
          > globalClaimLnsR owNum;
          > ButtonSupprimer .value = 'remove';
          > ButtonSupprimer .onclick=remove Row;
          > cellSec10.appen dChild(ButtonSu pprimer);
          > rowSec2.appendC hild(cellSec10) ;
          >
          > tablebody2.appe ndChild(rowSec2 );
          > formation.appen dChild(tablebod y2);
          > globalClaimLnsR owNum = globalClaimLnsR owNum + 1;
          > }
          >
          > function invoice_row(s_i nvoice_no,s_inv oice_amount)
          > {
          > var body=document.b ody;
          > var Table,theRow,aC ell,aTextBox,ta blebody2,rowSec 2;
          > var theTable;
          > var rowSec1,current text;
          > var opt1,sel2;
          > var cellSec1,cellSe c2,cellSec3,cel lSec4,cellSec5;
          > var cellSec6,cellSe c7,cellSec8,cel lSec9,cellSec10 ;
          > var formation = document.getEle mentById('forma tionInvoice');
          > var tablebody2=form ation.getElemen tsByTagName('tb ody')[0];
          > rowSec1=documen t.createElement ('TR');
          > cellSec1=docume nt.createElemen t('TD');
          > currenttext=doc ument.createTex tNode('Intitul' );
          > rowSec2=documen t.createElement ('TR');
          > rowSec2.id = 'row_' + globalClaimLnsR owNum;
          >
          > cellSec1=docume nt.createElemen t('TD');
          > aTextBox=docume nt.createElemen t('input');
          > aTextBox.type = 'text';
          > aTextBox.value = s_invoice_no;
          > aTextBox.name = 'txt_cell_three _' +
          > globalClaimLnsR owNum;
          > aTextBox.id = 'txt_cell_three _' + globalClaimLnsR owNum;
          > aTextBox.onchan ge=function(){c alculateOneRow2 (5);};
          > cellSec1.append Child(aTextBox) ;
          > rowSec2.appendC hild(cellSec1);
          >
          > cellSec5=docume nt.createElemen t('TD');
          > aTextBox=docume nt.createElemen t('input');
          > aTextBox.type = 'text';
          > aTextBox.value = s_invoice_amoun t;
          > aTextBox.id = 'txt_cell_four_ ' +
          > globalClaimLnsR owNum;
          > aTextBox.name = 'txt_cell_four_ ' +
          > globalClaimLnsR owNum;
          > aTextBox.onchan ge=function(){c alculateOneRow2 (5);};
          > cellSec5.append Child(aTextBox) ;
          > rowSec2.appendC hild(cellSec5);
          > cellSec10=docum ent.createEleme nt('TD');
          > ButtonSupprimer =document.creat eElement('input ');
          > ButtonSupprimer .id = 'five_invoice_d el' +
          > globalClaimLnsR owNum;
          > ButtonSupprimer .name = 'five_invoice_d el' +
          > globalClaimLnsR owNum;
          > ButtonSupprimer .type = 'button';
          > ButtonSupprimer .value = 'del';
          > ButtonSupprimer .onclick=remove Row;
          > cellSec10.appen dChild(ButtonSu pprimer);
          > rowSec2.appendC hild(cellSec10) ;
          >
          > tablebody2.appe ndChild(rowSec2 );
          > formation.appen dChild(tablebod y2);
          > globalClaimLnsR owNum = globalClaimLnsR owNum + 1;
          > }
          >
          > function calculateOneRow 1(){ // for element within row id "row_xxxx"
          > var n_Tab = "either";
          >
          > for( var node = this.parentNode ; node; node=node.paren tNode){
          > if(node.tagName =="TR"){
          > alert('Table:' + n_Tab + ', row:' + node.id.substri ng(4))
          > }
          > }
          > }
          > function calculateOneRow 2(n_Tab){ // for element within row id
          > "row_xxxx"
          >
          > for( var node = this.parentNode ; node; node=node.paren tNode){
          > if(node.tagName =="TR"){
          > alert('Table:' + n_Tab + ', row:' + node.id.substri ng(4))
          > }
          > }
          > }
          > function removeRow() // method of form element within row
          > {
          > for( var node = this.parentNode ; node; node=node.paren tNode)
          > if(node.tagName =="TR"){
          > node.parentNode .removeChild(no de);
          > break;
          > }
          > }
          > function removeAllRowsAl lTables(){} // fucntion to remove all rows
          > from all detail tables
          >
          > function buttonAction(nB utton)
          > {
          > 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_detai l_new' type='button'
          > id='cmd_detail_ new' value='add row table1' onclick=detail_ row('','');>
          > </td>
          > <td> <input name='cmd_invoi ce' 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=removeA llRowsAllTables ();>
          > </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%'>&nb sp;<b>GOODS</b></td>
          > <td width='5%'>&nbs p;<b>UNIT PRICE</b></td>
          > <td width='5%'>&nbs p;<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='formationIn voice'>
          > <thead>
          > <tr>
          > <td colspan='8'><b> TABLE2<b></td>
          > </tr>
          > <tr>
          > <td width='15%'>&nb sp;INVOICE NUMBER</td>
          > <td width='5%'>&nbs p;INVOICE DATE</td>
          > <td>&nbsp;</td>
          > </tr>
          > </thead>
          > <tbody> </tbody>
          > </table></td>
          > </tr>
          > </table>
          > </form>
          > </body>
          > </html>
          >
          > thanks for any help, kie[/color]

            Comment

            Previous template Next
            Working...