By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
425,925 Members | 732 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 425,925 IT Pros & Developers. It's quick & easy.

DOM-dynamically-created HTML buttons and function argument passing problem

P: 1
Buddies,
I have a web page to create HTML buttons dynamically as in the “formDivColorPicker” function

Expand|Select|Wrap|Line Numbers
  1. //////////////////////////////////////////////////////////////////////////////////// version 1 : using global variables ////////////////////////////////////////////////////////////////// 
  2. var _textField, _divColorPicker;  // global vars
  3.  
  4. window.onload = function()
  5. {
  6. _textField = document.getElementById('htxaMessage'); // fill global var  *****    
  7. _divColorPicker= document.getElementById('divColorPicker');  // fill global var  ******      
  8.  
  9.     formDivColorPicker();  // no need arguments ******************************
  10. }
  11.  
  12. function changeFontColor(button)
  13. {
  14.     var fontColor = button.id.split('_');
  15.     // insertAtCaret function is defined in some where else on the page
  16.     insertAtCaret(_textField, '[font color=' + fontColor[1] + ']', '[/font]');
  17.     alert(_divColorPicker.id);
  18. }
  19. function formDivColorPicker()
  20. {
  21.     var op = _divColorPicker;
  22.     var c=0;
  23.  
  24.     for(var i=0, l=JSONColors.length; i<l; i++)
  25.     {
  26.      // DOM-dynamically-created HTML buttons
  27.  
  28.         op.innerHTML += '<input id=' + 'btnColor_' + JSONColors[i].name + ' type=button onclick="changeFontColor(this);" style="width:16px; height:16px; background-color:' + JSONColors[i].value + '" />&nbsp&nbsp';
  29.  
  30.         c++;
  31.         if(c==COLOR_BUTTONS_PER_ROW)
  32.         {
  33.             op.innerHTML +="<br><span style='margin-left:150px'>";
  34.             c=0;
  35.             op.innerHTML +="</span>";
  36.         }
  37.     }
  38. }
  39.  
  40. … markups on the page 
  41.   <tr>
  42.                 <td>
  43.                      <div id="divColorPicker" style="display:none; margin-left:150px; position: static">
  44.                      </div>
  45.                 </td>
  46.             </tr>
  47.  
  48.             <tr style="height:40%">
  49.                 <td align="left" valign="top">
  50.                       <textarea id=htxaMessage cols="70" rows=3 onkeyup="htxaMessage_checkIfEnterKeyHit(event);"></textarea>
  51.  
  52. The codes work fine with the “changeFontColor” function if I use global variables such as var _textField, _divColorPicker;  on window load event and I need to pass this to that function when I create buttons using DOM in the “formDivColorPicker” function. 
  53. However, if I do not use global variables and the form of functions as follows, then I get javascript runtime error like “object is undefined…”  in function “changeFontColor” for arguments like textField and divColorPicker:
  54.  
  55.  
  56. /////////////////////////// version 2 not using global vars but argument passing  ////////
  57. //var _textField, _divColorPicker;  // commented out
  58.  
  59. window.onload = function()
  60. {
  61. var _textField = document.getElementById('htxaMessage'); // local var
  62. var _divColorPicker= document.getElementById('divColorPicker');// local var
  63.  
  64.     formDivColorPicker(_textField, _divColorPicker); // call the function with arguments ******************************
  65. }
  66.  
  67. function changeFontColor(textField, divColorPicker){
  68.     var fontColor = button.id.split('_');
  69.     // insertAtCaret function is defined in some where else on the page
  70.     insertAtCaret(_textField, '[font color=' + fontColor[1] + ']', '[/font]'); // error******
  71.     alert(divColorPicker.id); // error ******
  72. }
  73.  
  74. function formDivColorPicker(textField, divColorPicker){
  75.     var op = _divColorPicker;
  76.     var c=0;
  77.  
  78.     for(var i=0, l=JSONColors.length; i<l; i++)
  79.     {
  80.      // DOM-dynamically-created HTML buttons
  81.  
  82.      op.innerHTML += '<input id=' + 'btnColor_' + JSONColors[i].name + ' type=button onclick="changeFontColor(‘ + textField + ‘,’ + divColorPicker + ‘);" style="width:16px; height:16px; background-color:' + JSONColors[i].value + '" />&nbsp&nbsp';
  83.  
  84.         c++;
  85.         if(c==COLOR_BUTTONS_PER_ROW)
  86.         {
  87.             op.innerHTML +="<br><span style='margin-left:150px'>";
  88.             c=0;
  89.             op.innerHTML +="</span>";
  90.         }
  91.     }
  92. }

Thanks in advance for any help or idea.
johnjsforum
Aug 2 '07 #1
Share this Question
Share on Google+
1 Reply


acoder
Expert Mod 15k+
P: 16,027
The underscores need to be removed on lines 71 and 76. You've forgotten to remove them to use the passed arguments.
Jan 1 '08 #2

Post your reply

Sign in to post your reply or Sign up for a free account.