How to add more than document.getElementById?

Question

the following is working fine:

document.getElementById("comment").style.background=color

I'd like to add several IDs. The following do not work:

document.getElementById("comment, name, url").style.background=color
document.querySelectorAll("comment, name, url").style.background=color

Can someone suggest what code avoiding to write a new function to bind all the ids?

EDIT: This is the code I am working on: On the header I have:

<script>
function setbg(color)
{
document.getElementById("comment").style.background=color
}
</script>

And it styles well the following textarea:

<p><textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4" required="" title="Mandatory field" onfocus="this.value=''; setbg('#e5fff3');" onblur="setbg('white')" placeholder="Add a comment here..." style="background-color: white; background-position: initial initial; background-repeat: initial initial;"></textarea></p>

But I'd like it to work also for:

<input type="text" name="url" id="url" value="" size="22" tabindex="3" placeholder="WWW" onfocus="this.value=''; setbg('#e5fff3');" onblur="setbg('white')">

As well as per other fields, like email, name, etc.

Where do you use jquery ? $("#comment, #name, #url").css('background-color', color); should work. — Pierre Emmanuel Lallemant, Oct 27 '13 at 23:03
Look: http://stackoverflow.com/questions/7079011/jquery-multiple-id-selectors — Mindbreaker, Oct 27 '13 at 23:04
JavaScript works on *HTML*, not *PHP* (please show the HTML created by that PHP, 'view source' in your browser). — David Thomas, Oct 27 '13 at 23:58

David Thomas · Accepted Answer · 2013-10-27T23:11:34.817

2

Create, and use, a function:

function colorElement(id, color){
    document.getElementById(id).style.backgroundColor = color;
}

colorElement('comment', 'red');
colorElement('name', 'green');
colorElement('url', 'blue');

JS Fiddle demo.

Or you can use an array of element ids:

['comment', 'name', 'url'].forEach(function(a){
    document.getElementById(a).style.backgroundColor = 'red';
});

JS Fiddle demo.

Or, as a development of the previous (which allows you to set different colours):

[{
    "id": "comment",
    "color": "red"
}, {
    "id": "name",
    "color": "green"
}, {
    "id": "url",
    "color": "blue"
}].forEach(function (a) {
    document.getElementById(a.id).style.backgroundColor = a.color;
});

JS Fiddle demo.

edited Oct 27 '13 at 23:11

answered Oct 27 '13 at 23:03

David Thomas

249,100
51
377
410

I believe you meant `colorElement()` instead of `color()`? – Sterling Archer Oct 27 '13 at 23:05
1

I did; just caught that when I was writing the demo. Thanks! =D – David Thomas Oct 27 '13 at 23:07
Hmm, thanks. But I don't need to specify the color on the header. I will specify it on the different forms... for example: `onfocus="this.value=''; setbg('#e5fff3');"`.Now I am using in the header ``, but I'd like the color to be set later via `setbg` – Pikk Oct 27 '13 at 23:08
1

I honestly aren't sure quite what you're asking (incidentally, you don't seem to be using jQuery from what you've written/shown, why is it in the tags?); do you want to change the `background-color` of a given element (`form`?) when one of its children is focused? Or change the colour of a form control (`input`, `textarea`...)? – David Thomas Oct 27 '13 at 23:13
Hmm... I found this tutorial on a site. It was called "Style textaread with HTML5 + jQuery". I thought it is jQuery, but I have no idea. Please take a look here [Link text](http://glamourina.pl/chicspicy-dress/) ... Now the code works only for the textarea. I'd like to work for all the other fields – Pikk Oct 27 '13 at 23:18
I have no idea where you *meant* to send me, but I don't think it was *that* site (which features many pictures of an attractive woman, which is not unwelcome, but it certainly doesn't seem to mention jQuery or HTML5). Please, post the minimal ([SSCCE](http://sscce.org/)) code (HTML and JavaScript/jQuery) in your question, where we can *see* what you're trying to do. Ideally *also* publish a [live demo](http://jsfiddle.net/) so we can play, and experiment, with it. – David Thomas Oct 27 '13 at 23:23
My apologies. The site I sent you, is the site where I am trying to apply the code. The site where there is written this is jQuery is here [link](http://css-tricks.com/creating-a-nice-textarea/) – Pikk Oct 27 '13 at 23:45
No problem with that; though I'd still be interested in seeing the relevant (as mentioned before) simple/minimal code you're working with (added to your question), and a clear explicit statement of what you're trying to do, and what's going wrong with your attempt(s). That way we can more easily, and specifically, help you out. :) – David Thomas Oct 27 '13 at 23:47

score 2 · Answer 2 · answered Oct 27 '13 at 23:03

2

Since you tagged jQuery, here's a way:

$("#comment, #name, #url").css("background-color",color);

This grabs multiple ids, and applies the style to them.

answered Oct 27 '13 at 23:03

Sterling Archer

22,070
18
81
118

Guffa · Answer 3 · 2013-10-27T23:47:21.837

1

The getElementById method can only get one element, so you would need to use it on each id:

var ids = ["comment", "name", "url"];
for (i in ids) {
  document.getElementById(ids[i]).style.background = color;
}

The querySelectorAll takes a selector, so you would need to prefix each id with #, then you need to loop through the result as you can only set a property on one element at a time:

var el = document.querySelectorAll("#comment, #name, #url");
for (i in el) {
  el[i].style.background = color;
}

Demo: http://jsfiddle.net/Guffa/B3J4a/

edited Oct 27 '13 at 23:47

answered Oct 27 '13 at 23:09

Guffa

687,336
108
737
1,005

2

`for..in` over an _Array_? – Paul S. Oct 27 '13 at 23:11
@PaulS.: It iterates of the keys, and the keys in an array is the indexes. – Guffa Oct 27 '13 at 23:36
I've tried both of them, but in my code don't work :( Probably I am doing something wrong. – Pikk Oct 27 '13 at 23:42
@Pikk: I added a link to a demo. – Guffa Oct 27 '13 at 23:48
@Guffa If the browser supports `for..in` but not enumerability, it may also iterate over `length`, similarly if any enumerable keys were added that are non-numeric they will be included even though they're not "items". It's usually better to iterate an _Array_ by using an integer variable. One more thing; you forgot to `var` it so your code currently makes `i` global. – Paul S. Oct 28 '13 at 01:06

score 0 · Answer 4 · answered Oct 27 '13 at 23:06

0

Another approach is create an array of ID's and loop over array

var els=["comment", "name", "url"];

while (els.length){
  document.getElementById(els.pop()).style.backgroundColor = color;
}

answered Oct 27 '13 at 23:06

charlietfl

170,828
13
121
150

score 0 · Answer 5 · answered Oct 27 '13 at 23:07

0

Either you can iterate with array of element name like

for(var i=0; i<3; i++) 
{
   document.getElementById(array[i]).style.background=color;
}

answered Oct 27 '13 at 23:07

Airy

5,484
7
53
78

How to add more than document.getElementById?

5 Answers5