Changing background color of all elements with the same class

Question

I have a link and a table row that have matching classes. When the link is clicked, I would like to change the background color of the row with the same class. For each ca

Answer 1

You have several errors. You mixed classes with ids and also the class property is actually className

<script type="text/javascript">

function check(x) {
    elements = document.getElementsByClassName(x);
    for (var i = 0; i < elements.length; i++) {
        elements[i].style.backgroundColor="blue";
    }
}

</script>

<a href="#" class="first" onclick="check(this.className)">change first row</a>
<a href="#" class="second" onclick="check(this.className)">change second</a>
<!--        FIX ( id -> class )                FIX ( class -> className ) -->
<table>
<tr class="first">
<td>test1</td>
</tr>


<tr class="second">
<!--FIX ( id -> class ) -->
<td>test2</td>
</tr>
</table>

Check this jsfiddle

Answer 2

You can also do it easily without jQuery with querySelectorAll():

<script type="text/javascript">

function check(selector)
{
    var elements = document.querySelectorAll(selector);
    for (var i = 0; i < elements.length; i++) {
        elements[i].style.backgroundColor = "blue";
    }
}
</script>

<a href="#" class="first" onclick="check('.' + this.className)">change first row</a>
<a href="#" id="second" onclick="check('#' + this.id)">change second</a>

<table>
<tr class="first">
    <td>test1</td>
</tr>


<tr id="second">
    <td>test2</td>
</tr>

Answer 3

jQuery simplifies it:

$(".button").click(function(){
 var class = $(this).attr("data-class");
 var color = $(this).attr("data-color");
 $("."+class).css("background-color",color);
});

.button is the class to apply to the button, add data-class for the class you would like to change the background color of, and data-color is the color you would like to change it to.