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

[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.name + ' type=button onclick="changeFontColor(this);" style="width:16px; height:16px; background-color:' + JSONColors.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.name + ' type=button onclick="changeFontColor(‘ + textField + ‘,’ + divColorPicker + ‘);" style="width:16px; height:16px; background-color:' + JSONColors.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

 

[BillyRayPreachersSon]

Try not storing them in vars at all - it looks like you don't really need to:

formDivColorPicker(document.getElementById('htxaMessage'), document.getElementById('divColorPicker'));}

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[johnjsforum]

Dan,
Thanks for your post. I'd like to understand more about the difference of code execution between "not storing objects in vars and passing those objects direclty to function formDiveColorPicker()" (your) and (mine) "storing objects in vars and passing those vars to the function".
Thanks for your explanation if possible.
johnjsforum

 

[BillyRayPreachersSon]

I don't have an explanation - it was simply a suggestion for you to try (much as it would be one of the things I would try if I were attempting to debug this issue).

Debugging isn't always about knowing immediately what the issue is - it's sometimes trial and error... so perhaps you should try some things?

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]