Solved

Is it possible to combine multiple getElementById statements into one?

Posted on 2012-03-12
8
410 Views
Last Modified: 2012-03-15
These statements take up lots of space in my js file, can I consolidate them into one statement?

      document.getElementById("firstName").style.border = '2px solid #9090f9';
      document.getElementById("lastName").style.border = '2px solid #9090f9';
      document.getElementById("address").style.border = '2px solid #9090f9';
      document.getElementById("city").style.border = '2px solid #9090f9';
      document.getElementById("zip").style.border = '2px solid #9090f9';
      document.getElementById("email").style.border = '2px solid #9090f9';
0
Comment
Question by:shampouya
8 Comments
 
LVL 15

Assisted Solution

by:StingRaY
StingRaY earned 200 total points
ID: 37712953
No. You can't do that.

I recommend you to use jQuery. Those statements could be turned like this.

$('#firstName,#lastName,#address,#city,#zip,#email').css('border', '2px solid #9090f9');

OR, put "2px solid #9090f9" into a class named "border9090f9" and write:

$('#firstName,#lastName,#address,#city,#zip,#email').addClass('border9090f9');
0
 
LVL 82

Expert Comment

by:leakim971
ID: 37712973
create an appropriate funcion :
function applyCSS(ids, css) {
   for(var i=0;i<ids.length;i++) document.getElementById(ids[i]).style.border = css;
}

Open in new window


and now your code become :
applyCSS( ["firstName","lastName","address","city","zip","email"], "2px solid #9090f9");

Open in new window

0
 
LVL 3

Expert Comment

by:microvb
ID: 37712999
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.

// 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;
    }
}

Open in new window

0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 7

Expert Comment

by:micropc1
ID: 37713027
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/

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);
}

Open in new window

0
 
LVL 1

Expert Comment

by:rakjosh
ID: 37713054
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.
0
 
LVL 51

Accepted Solution

by:
ahoffmann earned 300 total points
ID: 37713955
// quick&dirty
n=["firstName","lastName","address","city","zip","email"];
for (x in n)  document.getElementById(n[x]).style.border ="2px solid #9090f9";
0
 
LVL 20

Expert Comment

by:Proculopsis
ID: 37714013
The answer is YES but it's still not nice:

document.getElementById("firstName").style.border = document.getElementById("lastName").style.border = document.getElementById("address").style.border = document.getElementById("city").style.border = document.getElementById("zip").style.border = document.getElementById("email").style.border = '2px solid #9090f9';

As suggested elsewhere, this is really a job for a css class.
0
 

Author Closing Comment

by:shampouya
ID: 37723610
thanks!
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
How Close unsubmited attempts 10 42
Session on Html 8 36
How do I Enable submit button only if listbox has items 4 27
bootstrap css color change 10 16
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

685 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question