Solved

Is it possible to combine multiple getElementById statements into one?

Posted on 2012-03-12
8
418 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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
SharePoint Admin?

Enable Your Employees To Focus On The Core With Intuitive Onscreen Guidance That is With You At The Moment of Need.

 
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

Industry Leaders: 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

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.
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

622 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