shampouya
asked on
Is it possible to combine multiple getElementById statements into one?
These statements take up lots of space in my js file, can I consolidate them into one statement?
document.getElementById("f irstName") .style.bor der = '2px solid #9090f9';
document.getElementById("l astName"). style.bord er = '2px solid #9090f9';
document.getElementById("a ddress").s tyle.borde r = '2px solid #9090f9';
document.getElementById("c ity").styl e.border = '2px solid #9090f9';
document.getElementById("z ip").style .border = '2px solid #9090f9';
document.getElementById("e mail").sty le.border = '2px solid #9090f9';
document.getElementById("f
document.getElementById("l
document.getElementById("a
document.getElementById("c
document.getElementById("z
document.getElementById("e
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
A bit more complicated way to do this would be as follows. This method works well if you are aiming to separate your data from your logic. Double check the loop code -- it should be ok, but it's been a while since I toyed with looping through JSON in javascript.
Ray above is correct in stating that you can't consolidate into a single statement, however you can seperate the logic from the data so that it is easier to make a change to those fields or add new ones with the following code by only making minor changes rather than copy / pasting the whole line.
Ray above is correct in stating that you can't consolidate into a single statement, however you can seperate the logic from the data so that it is easier to make a change to those fields or add new ones with the following code by only making minor changes rather than copy / pasting the whole line.
// JSON Array
var FormFields = {"elements": [
{"id": "firstName"},
{"id": "lastName"},
{"id": "address"},
{"id": "city"},
{"id": "zip"},
{"id": "email"}
]
};
// What style do you wish to apply to the border
updateStyle('2px solid #9090f9');
// Function to loop through elements
function updateStyle(s) {
foreach(FormFields.elements as FormField) {
document.getElementById(FormField.id).style.border = s;
}
}
just create a custom $ (dollar) function, then you can reference them by $('elementName'), which can save a lot of typing...
http://osric.com/chris/accidental-developer/2008/04/the-javascript-dollar-sign-function/
http://osric.com/chris/accidental-developer/2008/04/the-javascript-dollar-sign-function/
function $(element) {
if (arguments.length > 1) {
for (var i = 0, elements = [], length = arguments.length; i < length; i++)
elements.push($(arguments[i]));
return elements;
}
if (Object.isString(element))
element = document.getElementById(element);
return Element.extend(element);
}
its not possible to combine the above statements in one, instead of that you can use css class
.textBoxCss {
border: #9090f9 2px solid ;
}
and apply the baove class in the html code.
.textBoxCss {
border: #9090f9 2px solid ;
}
and apply the baove class in the html code.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
The answer is YES but it's still not nice:
document.getElementById("f irstName") .style.bor der = document.getElementById("l astName"). style.bord er = document.getElementById("a ddress").s tyle.borde r = document.getElementById("c ity").styl e.border = document.getElementById("z ip").style .border = document.getElementById("e mail").sty le.border = '2px solid #9090f9';
As suggested elsewhere, this is really a job for a css class.
document.getElementById("f
As suggested elsewhere, this is really a job for a css class.
ASKER
thanks!
Open in new window
and now your code become :
Open in new window