?
Solved

Is it possible to combine multiple getElementById statements into one?

Posted on 2012-03-12
8
Medium Priority
?
424 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 800 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 1200 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

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

719 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