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

[johnjsforum]

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

//////////////////////////////////////////////////////////////////////////////////// version 1 : using global variables ////////////////////////////////////////////////////////////////// 
 var _textField, _divColorPicker;  // global vars
 
window.onload = function()
{
_textField = document.getElementById('htxaMessage'); // fill global var  *****    
_divColorPicker= document.getElementById('divColorPicker');  // fill global var  ******      
 
    formDivColorPicker();  // no need arguments ******************************
}
 
function changeFontColor(button)
{
    var fontColor = button.id.split('_');
    // insertAtCaret function is defined in some where else on the page
    insertAtCaret(_textField, '[font color=' + fontColor[1] + ']', '[/font]');
    alert(_divColorPicker.id);
}
function formDivColorPicker()
{
    var op = _divColorPicker;
    var c=0;
 
    for(var i=0, l=JSONColors.length; i<l; i++)
    {
     // DOM-dynamically-created HTML buttons
 
        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';
 
        c++;
        if(c==COLOR_BUTTONS_PER_ROW)
        {
            op.innerHTML +="<br><span style='margin-left:150px'>";
            c=0;
            op.innerHTML +="</span>";
        }
    }
}
 
… markups on the page 
  <tr>
                <td>
                     <div id="divColorPicker" style="display:none; margin-left:150px; position: static">
                     </div>
                </td>
            </tr>
 
            <tr style="height:40%">
                <td align="left" valign="top">
                      <textarea id=htxaMessage cols="70" rows=3 onkeyup="htxaMessage_checkIfEnterKeyHit(event);"></textarea>
…
 
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. 
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:
 
 
/////////////////////////// version 2 not using global vars but argument passing  ////////
//var _textField, _divColorPicker;  // commented out
 
window.onload = function()
{
var _textField = document.getElementById('htxaMessage'); // local var
var _divColorPicker= document.getElementById('divColorPicker');// local var
 
    formDivColorPicker(_textField, _divColorPicker); // call the function with arguments ******************************
}
 
function changeFontColor(textField, divColorPicker){
    var fontColor = button.id.split('_');
    // insertAtCaret function is defined in some where else on the page
    insertAtCaret(_textField, '[font color=' + fontColor[1] + ']', '[/font]'); // error******
    alert(divColorPicker.id); // error ******
}
 
function formDivColorPicker(textField, divColorPicker){
    var op = _divColorPicker;
    var c=0;
 
    for(var i=0, l=JSONColors.length; i<l; i++)
    {
     // DOM-dynamically-created HTML buttons
 
     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';
 
        c++;
        if(c==COLOR_BUTTONS_PER_ROW)
        {
            op.innerHTML +="<br><span style='margin-left:150px'>";
            c=0;
            op.innerHTML +="</span>";
        }
    }
}

Thanks in advance for any help or idea.
johnjsforum

[acoder]

The underscores need to be removed on lines 71 and 76. You've forgotten to remove them to use the passed arguments.