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

Dynamic variable naming in Javascript ?

P: n/a
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(editSelectFontOp tion1Text);

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

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

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

....

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

Alexandre
Jul 23 '05 #1
Share this Question
Share on Google+
6 Replies


P: n/a
alexandre damiron wrote:
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(editSelectFontOp tion1Text);

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

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

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

...

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[i];

/* 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>


--
Rob
Jul 23 '05 #2

P: n/a
alexandre damiron wrote:
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(editSelectFontOp tion1Text);

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

[...]


.... 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
Jul 23 '05 #3

P: n/a
RobG wrote:
[...]
for (var i=0; i<aFont.length; i++) {
var editSelectFontOption = document.createElement('OPTION');
editSelectFontOption.value = i;
editSelectFontOption.text = aFont[i];

/* 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[i] = new Option(aFont[i], i);
}

[...]
--
Rob
Jul 23 '05 #4

P: n/a
alexandre damiron wrote:
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(editSelectFontOp tion1Text);


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).

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
Jul 23 '05 #5

P: n/a
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 :
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(editSelectFontOp tion1Text);

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

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

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

...

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

Alexandre

Jul 23 '05 #6

P: n/a
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

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
Jul 23 '05 #7

This discussion thread is closed

Replies have been disabled for this discussion.