JavaScript: change style of element specified by class

Question

I've tried my best to solve my own problem but am having trouble getting started with a fairly simple JS script.

I'm trying to change the font colour of text which contains the "-" character for a specified element class.

This is what I've got:

<html>
<body>
<script>
<!--
function myFunction()
{
var elements = document.getElementsByClassName("example");

for(var i = 0, length = elements.length; i < length; i++)
{
    if(elements[i].textContent.indexOf('-') != -1)
        {
            elements[i].style.color = red;
        }
    } 
}
-->
</script>
<table>
    <tr>
        <td class="example">-100<td>
        <td class="example">100<td>
    </tr>
</table>
</body>
</html>

What have I done wrong?

Edit: this is the final code I went with, which works perfectly well.

<!DOCTYPE html>
<html>
<body>

<script type="text/javascript">
<!--
function myFunction()
{
    var elements = document.getElementsByClassName("example");

    for(var i = 0, length = elements.length; i < length; i++)
    {
        if(elements[i].textContent.indexOf('-') !== -1)
            {
                elements[i].style.color = "red";
            } else
            {
                elements[i].style.color = "green";
            } 
    } 
}
-->
</script>

<table>
<tr>
<td class="example">-100<td>
<td class="example">100<td>
</tr>
</table>
<script type="text/javascript">
<!--
myFunction();
-->
</script>
</body>
</html>

.indexOf() is not being used properly It's a function call that takes a string and returns an integer. — jfriend00
– jfriend00, Commented Oct 13, 2014 at 3:59

Troy Gizzi · Accepted Answer · 2014-10-13 04:06:52Z

4

I believe there are a total of three mistakes here:

Not calling the function at all. That can be taken care of like so:

<body onload="myFunction();">
Incorrect use of indexOf. Here's the right way:

if(elements[i].textContent.indexOf('-') !== -1)
Not quoting the color literal. Put red in quotes.

elements[i].style.color = "red";

answered Oct 13, 2014 at 4:06

Troy Gizzi

2,5191 gold badge17 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jobayer · Accepted Answer · 2014-10-13 04:20:06Z

0

You have not called your js function & use elements[i].textContent.indexOf('-') === 0 instead of your current code. complete code for you -

function myFunction()
{
var elements = document.getElementsByClassName("example");

for(var i = 0, length = elements.length; i < length; i++)
{

if(elements[i].textContent.indexOf('-') === 0)
    {

        elements[i].style.color = "red";
    }
 } 
 }

</script>
<table>
<tr>
    <td class="example">-100<td>
    <td class="example">100<td>
</tr>
</table>

edited Oct 13, 2014 at 4:20

answered Oct 13, 2014 at 4:14

Jobayer

1,2311 gold badge14 silver badges23 bronze badges

Collectives™ on Stack Overflow

JavaScript: change style of element specified by class

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related