Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 433
  • Last Modified:

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("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
shampouya
Asked:
shampouya
2 Solutions
 
StingRaYCommented:
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
 
leakim971PluritechnicianCommented:
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
 
microvbCommented:
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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
micropc1Commented:
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
 
rakjoshCommented:
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
 
ahoffmannCommented:
// quick&dirty
n=["firstName","lastName","address","city","zip","email"];
for (x in n)  document.getElementById(n[x]).style.border ="2px solid #9090f9";
0
 
ProculopsisCommented:
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
 
shampouyaAuthor Commented:
thanks!
0

Featured Post

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now