CODEWITHSUNDEEP
javascripthtml
oe a
oe a

Reputation: 2280

Changing background color of all elements with the same class

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"

Upvotes: 15

Views: 90668

Answers (4)

Hebe
Hebe

Reputation: 810

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";
}

Upvotes: 0

Ivan Drinchev
Ivan Drinchev

Reputation: 19581

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

Upvotes: 20

Mooseman
Mooseman

Reputation: 18891

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.

Upvotes: 5

antoyo
antoyo

Reputation: 11923

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>

Upvotes: 6

Related Questions