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 case, there will be only one row with the same class.

Here is my current function.

   <script type="text/javascript">

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

Here is a part of the table row script:

<tr class="alt1 12">
<td width="50" height="55">
<img src="iPhone/statusicon/12.png" alt="" id="forum_statusicon_12" border="0"></td>
<td>
<div class="forumtitle">
<a class="forumtitle 12" href="forumdisplay.php?f=12" action="async" onclick="check(this.className.split(' ')[1])">News and Current Events</a></div>
</td>
<td width="25">
<div class="forumarrow"><img src="iPhone/chevron.png" alt="" border="0"></div>
</td>
</tr>

The table row has two classes, and I need the second one (the number) to be what is addressed. The current code gives the error "An invalid or illegal string was specified"

score 18 · Accepted Answer · edited Jan 03 '14 at 02:57

18

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

edited Jan 03 '14 at 02:57

user3155750

3
2

answered Jan 13 '13 at 19:27

drinchev

19,201
4
67
93

1

This looks by far the best to me, there's no reason to preserve the odd id/class mix and jQuery is overkill for so simple an operation. – Bubbles Jan 13 '13 at 19:33
sorry about that, i had inadvertently posted the wrong code. just one final question...i realized that i have two classes assigned to each row...the script automatically assigns the first one, and this ads another one delimited by a space. how can i handle this situation? i always want to send the second class to this function. – john cs Jan 13 '13 at 19:44
just replace ```this.className``` with ```this.className.split(' ')[1]``` – drinchev Jan 13 '13 at 19:48
I get an error "An invalid or illegal string was specified" for the line that sets elements. I just modified the original post with my updated code and an actual output instead of example. – john cs Jan 13 '13 at 20:02
I was using the wrong answers JS code, got it working, thank you! – john cs Jan 13 '13 at 20:27

score 6 · Answer 2 · answered Jan 13 '13 at 19:26

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>

Mooseman · Answer 3 · 2013-01-13T19:29:34.943

4

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.

edited Jan 13 '13 at 19:29

answered Jan 13 '13 at 19:21

Mooseman

18,763
14
70
93

I am pretty new with jQuery but two questions, first how do I dynamically make it? The class names will all be created by a script. Also, I get an error ") missing after parameters list" when trying to test it outl – john cs Jan 13 '13 at 19:25
2

Updated. Another note: don't use the same `id` multiple times on a page. It is invalid. – Mooseman Jan 13 '13 at 19:30

score 0 · Answer 4 · answered Dec 16 '21 at 03:31

Had same issue. Needed to change background of all elements in pure js (dark theme). Wasn't able to add jQuery on a page cuz of some weird error (This document requires 'TrustedHTML' assignment)

elements = document.querySelectorAll("*");
for (var i = 0; i < elements.length; i++) {
    elements[i].style.backgroundColor="#777";
    elements[i].style.color="#ddd";
}

Changing background color of all elements with the same class

4 Answers4

Linked