How to select multiple elements

Question

i have made a script where i can give a div a backgroundcolor by clicking on one of the td tag in the table. the problem is, i want to give more divs a color.

with getElementById() it can only select one div and not 2.

my CSS:

td {width:20px; height:20px;}
.result{width:200px; height:100px; margin:10px auto; background:green;}

my script:

function bgcolor(color){
        els = document.getElementByClassName('result');
        for(i in els){
            els[i].style.backgroundColor = color;
        }
    }

my HTML:

<table>
    <tr>
        <td style="background:red;" onclick="bgcolor('red')"></td><td style="background:blue;" onclick="bgcolor('blue')"></td>
    </tr>
    <tr>
        <td style="background:green;" onclick="bgcolor('green')"></td><td style="background:yellow;" onclick="bgcolor('yellow')"></td>
    </tr>
    <tr id="row">
        <td style="background:brown;" onclick="bgcolor('brown')"></td><td style="background:grey;" onclick="bgcolor('grey')"></td>
    </tr>
</table>
<div class="result"></div>

what have i done wrong?

Why don't you just create one function and pass the color as a parameter? — j08691, Oct 28 '13 at 16:30
possible duplicate of [Changing background color of all elements with the same class](http://stackoverflow.com/questions/14307163/changing-background-color-of-all-elements-with-the-same-class) — Barmar, Oct 28 '13 at 16:38

score 3 · Accepted Answer · answered Oct 28 '13 at 16:30

3

Create one function to change the color, use the parameter to specify which color. getElementsByClassName returns a collection, so you'll need to loop through the collection and apply the background color each time:

function bgcolor(color){
  els = document.getElementsByClassName('result');
  for(i in els){
    els[i].style.backgroundColor = color
  }
}

Then call it with

bgcolor('red');

answered Oct 28 '13 at 16:30

George

36,413
9
66
103

it doesn't work. chrome said:Uncaught TypeError: Object # has no method 'getElementByClassName' – FFBbodie Oct 29 '13 at 08:32
it works! but Chrome is still saying: Uncaught TypeError: Cannot set property 'backgroundColor' of undefined. what is going on? – FFBbodie Oct 29 '13 at 09:02

phron · Answer 2 · 2013-10-28T16:44:43.080

0

you call getElementByClassName(classname) which return the first element with the specified class, if you want all the elements you have to do document.getElementsByClassName(classname) (elements is plural)

edited Oct 28 '13 at 16:44

answered Oct 28 '13 at 16:33

phron

1,795
17
23

There's no such function as `getElementByClass`. – Barmar Oct 28 '13 at 16:39
Too fast to type it's getElementsByClassName(classnames) I just edit my answer – phron Oct 28 '13 at 16:45
There's no `getElementByClassName()`, either. There's no function that just returns the first element with the specified class. The only function that returns a single element is `getElementById`. – Barmar Oct 28 '13 at 18:09
you're right, my mistake... Indeed in GetElementsByClassName() elements is plural... – phron Oct 29 '13 at 06:34

score 0 · Answer 3 · answered Oct 28 '13 at 16:41

0

first of all use document.getElementsByClassName.

answered Oct 28 '13 at 16:41

Vipin

153
7
21

How to select multiple elements

3 Answers3