1

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?

4

3 回答 3

3

创建一个函数来改变颜色，使用参数指定哪种颜色。getElementsByClassName返回一个集合，因此您需要遍历集合并每次应用背景颜色：

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

然后调用它

bgcolor('red');
于 2013-10-28T16:30:14.110 回答
0

你调用getElementByClassName(classname)which 返回具有指定类的第一个元素，如果你想要你必须做的所有元素document.getElementsByClassName(classname)（元素是复数）

于 2013-10-28T16:33:23.110 回答
0

首先使用 document.getElementsByClassName。

于 2013-10-28T16:41:21.607 回答