I've created a script where clicking on a td tag in the table will change the background color of a div. However, I want to be able to change the background color of multiple divs.
The issue is that with getElementById(), it can only select one div and not two.
Here is my CSS:
td {width:20px; height:20px;}
.result{width:200px; height:100px; margin:10px auto; background:green;}
My script looks like this:
function bgcolor(color){
els = document.getElementByClassName('result');
for(i in els){
els[i].style.backgroundColor = color;
}
}
And here is my HTML code:
<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>
Where did I go wrong?