Dynamic variable naming in Javascript ?

[alexandre damiron]

Did anyone tried dynamic variable naming in Js, like the ${$varname}
feature of PHP ? It would easier a long DOM generation, for example to
place such a code portion into a loop

....

editSelectFontOption1 = document.createElement("OPTION");
editSelectFontOption1.setAttribute("value", "Font", 0);
editSelectFontOption1Text = document.createTextNode("Font");
editSelectFontOption1.appendChild(editSelectFontOption1Text);

editSelectFontOption2 = document.createElement("OPTION");
editSelectFontOption2.setAttribute("value", "Arial", 0);
editSelectFontOption2Text = document.createTextNode("Arial");
editSelectFontOption2.appendChild(editSelectFontOption2Text);

editSelectFontOption3 = document.createElement("OPTION");
editSelectFontOption3.setAttribute("value", "Courier", 0);
editSelectFontOption3Text = document.createTextNode("Courier");
editSelectFontOption3.appendChild(editSelectFontOption3Text);

editSelectFontOption4 = document.createElement("OPTION");
editSelectFontOption4.setAttribute("value", "Times New Roman", 0);
editSelectFontOption4Text = document.createTextNode("Times New Roman");
editSelectFontOption4.appendChild(editSelectFontOption3Text);

....

It's not for laziness but readability and maintanability ;-)


Thanks, merci

Alexandre

 

[RobG]

Did anyone tried dynamic variable naming in Js, like the ${$varname}
feature of PHP ? It would easier a long DOM generation, for example to
place such a code portion into a loop

...

editSelectFontOption1 = document.createElement("OPTION");
editSelectFontOption1.setAttribute("value", "Font", 0);
editSelectFontOption1Text = document.createTextNode("Font");
editSelectFontOption1.appendChild(editSelectFontOption1Text);

editSelectFontOption2 = document.createElement("OPTION");
editSelectFontOption2.setAttribute("value", "Arial", 0);
editSelectFontOption2Text = document.createTextNode("Arial");
editSelectFontOption2.appendChild(editSelectFontOption2Text);

editSelectFontOption3 = document.createElement("OPTION");
editSelectFontOption3.setAttribute("value", "Courier", 0);
editSelectFontOption3Text = document.createTextNode("Courier");
editSelectFontOption3.appendChild(editSelectFontOption3Text);

editSelectFontOption4 = document.createElement("OPTION");
editSelectFontOption4.setAttribute("value", "Times New Roman", 0);
editSelectFontOption4Text = document.createTextNode("Times New Roman");
editSelectFontOption4.appendChild(editSelectFontOption3Text);

...

It's not for laziness but readability and maintanability ;-)


Thanks, merci

Alexandre

<script type="text/javascript">
function addOptions(aSelect){

var aFont = ['Font','Arial','Courier','Times New Roman']

for (var i=0; i<aFont.length; i++) {
var editSelectFontOption = document.createElement('OPTION');
editSelectFontOption.value = i;
editSelectFontOption.text = aFont;

/* and then append it to something... */
aSelect.appendChild(editSelectFontOption);
}
}
</script>

<form action="">
<select name="sel">
</select>
<input type="button" value="Add Opt" onclick="
addOptions(this.form.sel);
">
</form>

 

[Dietmar Meier]

Did anyone tried dynamic variable naming in Js, like the ${$varname}
feature of PHP ?

You could use var varname [...] window[varname], but you should always
minimize the number of global variables, so ...

It would easier a long DOM generation, for example to
place such a code portion into a loop

...

editSelectFontOption1 = document.createElement("OPTION");
editSelectFontOption1.setAttribute("value", "Font", 0);
editSelectFontOption1Text = document.createTextNode("Font");
editSelectFontOption1.appendChild(editSelectFontOption1Text);

editSelectFontOption2 = document.createElement("OPTION");
editSelectFontOption2.setAttribute("value", "Arial", 0);
editSelectFontOption2Text = document.createTextNode("Arial");
editSelectFontOption2.appendChild(editSelectFontOption2Text);

[...]

.... I would suggest, you'd better use an array here:

var editSelectFontOption = new Array();

function addEditSelectFontOption(sText) {
var nCurrent, oCurrent;
nCurrent = editSelectFontOption.length,
oCurrent = editSelectFontOption[nCurrent]
= document.createElement("OPTION");
oCurrent.setAttribute("value", sText, 0);
oCurrent.appendChild(document.createTextNode(sText));
}

addEditSelectFontOption("Font");
addEditSelectFontOption("Arial");
[...]

ciao, dhgm

 

[RobG]

RobG wrote:
[...]

for (var i=0; i<aFont.length; i++) {
var editSelectFontOption = document.createElement('OPTION');
editSelectFontOption.value = i;
editSelectFontOption.text = aFont;

/* and then append it to something... */
aSelect.appendChild(editSelectFontOption);
}

Oooops, sorry, forgot IE is a bit broken here, try this (which
is much simpler anyway):

for (var i=0; i<aFont.length; i++) {
aSelect.options = new Option(aFont, i);
}

[...]

 

[Michael Winter]

Did anyone tried dynamic variable naming in Js, like the ${$varname}
feature of PHP ?

As long as you can obtain a reference to the object of which the
variables are properties[1]. With that reference, you can use bracket
notation to evaluate an expression which will be used to access the
property. Any expression is acceptable and can be as simple or as
complicated as you like. The thing to remember is that once the
expression has been evaluated, it will be coerced to a string and it's
that result which will be used.

Note that it's impossible to reference the variable object as its a
specification mechanism (a conceptual, rather than actual, object).
However, you can create an object and use that instead.

For (a very artifical) example,

var options = {},
text = {},
n = ...;

for(var i = 0; i < n; ++i) {
options['font' + i] = ...;
text['font' + i + 'text'] = ...;
}

though it would be more efficient to evaluate 'font' + i only once per
iteration.

[snip]

editSelectFontOption1 = document.createElement("OPTION");
editSelectFontOption1.setAttribute("value", "Font", 0);

There are only two arguments to the setAttribute method.

editSelectFontOption1Text = document.createTextNode("Font");
editSelectFontOption1.appendChild(editSelectFontOption1Text);

I'd write a function to do that:

function createFontOption(v) {
var e = document.createElement('option'),
tN = document.createTextNode(v);

e.value = v;
e.appendNode(tN);
return e;
}

You could then call that and add the return value to the SELECT
element, rendering multiple variables unnecessary.

[snip]

Hope that helps,
Mike


[1] All variables are object properties in ECMAScript, whether the
object is the global object, a host or native object, or the
variable object that is part of the execution context of a
function (the object which holds function-local variables).

 

[alexandre damiron]

That's help a lot. I simply did not figure I could use an array of
object. Maybe cause I encoutered some Ecmascript arrays limitation in
the paset. Thanks

Just a note for Michael: the third parameter in setAttribute in
optional, and allow you to set the first parameter as case-unsensitive.

merci


alexandre damiron a écrit :

 

[Michael Winter]

alexandre damiron wrote:

[snip]

Just a note for Michael: the third parameter in setAttribute in
optional, and allow you to set the first parameter as case-unsensitive.

Usings Microsoft's proprietary DOM, perhaps. However, using consistent
mark-up would render it's use unnecessary anyway. Alternatively, use
the convenience properties exposed to HTML documents.

Mike