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
Solved

Is it possible to combine multiple getElementById statements into one?

Posted on 2012-03-12
8
403 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
Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

808 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