I'm creating a table displayed in HTML with Django. I want to change the number's color to red when the number is negative, and to green when the number is positive. I know I need to use JS for this but I could not make it work. Any help will be greatly appreciated !!

Here is my Django HTML template :

{% load static %}

<link rel="stylesheet" type="text/css" href="{% static 'WalletJournal/style.css' %}" />

<div id="container">
<h1>{{ Transaction.TransactionDateTime }}</h1>
<table>
    <tr>
    <th>TRANSACTION AMOUNT</th>
    <th>BALANCE AFTER TRANSACTION</th>
    <th>TRANSACTION COMMENT</th>    
    </tr><tr>
    <div id="TransactionAmount"><td style="font-family:'Arial',serif;font-size:10pt">{{ Transaction.TransactionAmount }}</td></div>
    <td style="font-family:'Arial',serif;font-size:10pt">{{ Transaction.BalanceAfterTransaction }}</td>
    <td style="color:white">{{ Transaction.TransactionComment }}</td>
    <script>
        var el = document.getElementById('TransactionAmount');
        if(el<0) {
            el.addClass += "red";
        } else {
            el.addClass += "green";
        }
    </script>    
    </tr>
</table>
<h2>Feel free to contact me !</h2>
</div>

And the classes I created in my CSS :

.red {
    color:#FF0000;
}

.green {
    color:#33FF3C;
}

I tried creating some JS code from examples I found around the web but something must be wrong. My goal is to check if the number TransactionAmount is negative or positive, and adjust the color accordingly. I made the TransactionAmount div to be able to use it with getElementById...

<script>
            var el = document.getElementById('TransactionAmount');
            if(el<0) {
                el.addClass += "red";
            } else {
                el.addClass += "green";
            }
        </script>

And my number is still gray....

I'm creating a table displayed in HTML with Django. I want to change the number's color to red when the number is negative, and to green when the number is positive. I know I need to use JS for this but I could not make it work. Any help will be greatly appreciated !!

Here is my Django HTML template :

{% load static %}

<link rel="stylesheet" type="text/css" href="{% static 'WalletJournal/style.css' %}" />

<div id="container">
<h1>{{ Transaction.TransactionDateTime }}</h1>
<table>
    <tr>
    <th>TRANSACTION AMOUNT</th>
    <th>BALANCE AFTER TRANSACTION</th>
    <th>TRANSACTION COMMENT</th>    
    </tr><tr>
    <div id="TransactionAmount"><td style="font-family:'Arial',serif;font-size:10pt">{{ Transaction.TransactionAmount }}</td></div>
    <td style="font-family:'Arial',serif;font-size:10pt">{{ Transaction.BalanceAfterTransaction }}</td>
    <td style="color:white">{{ Transaction.TransactionComment }}</td>
    <script>
        var el = document.getElementById('TransactionAmount');
        if(el<0) {
            el.addClass += "red";
        } else {
            el.addClass += "green";
        }
    </script>    
    </tr>
</table>
<h2>Feel free to contact me !</h2>
</div>

And the classes I created in my CSS :

.red {
    color:#FF0000;
}

.green {
    color:#33FF3C;
}

I tried creating some JS code from examples I found around the web but something must be wrong. My goal is to check if the number TransactionAmount is negative or positive, and adjust the color accordingly. I made the TransactionAmount div to be able to use it with getElementById...

<script>
            var el = document.getElementById('TransactionAmount');
            if(el<0) {
                el.addClass += "red";
            } else {
                el.addClass += "green";
            }
        </script>

And my number is still gray....

• javascript
• jquery
• html
• css
• django

• addClass is a function, not a list. Try addClass("classname"). – tyteen4a03 Commented Mar 10, 2017 at 23:51
• Tried it but the numbers are still gray... Thx anyway :) – Taj Raba Commented Mar 11, 2017 at 0:02

2 Answers 2

You need to get the textContent of the element to test it's value. And you can use a single class that toggles if it's positive or not. And either use jquery's $.addClass() and $.removeClass() or javascript's classList.add() and classList.remove().

Also as Sujen K. pointed out, you have a tr > div > td for this element, and it should be tr > td > div instead.

var els = document.getElementsByClassName('TransactionAmount');
for (var i = 0; i < els.length; i++) {
  var cell = els[i];
  if (cell.textContent < 0) {
    cell.classList.remove('green')
  } else {
    cell.classList.add('green');
  }
}

.TransactionAmount {
  color: #FF0000;
}

.TransactionAmount.green {
  color: #33FF3C;
}

<table>
  <tr>
    <th>TRANSACTION AMOUNT</th>
    <th>BALANCE AFTER TRANSACTION</th>
    <th>TRANSACTION COMMENT</th>
  </tr>
  <tr>
    <td style="font-family:'Arial',serif;font-size:10pt"><div class="TransactionAmount">-1</div></td>
    <td style="font-family:'Arial',serif;font-size:10pt">{{ Transaction.BalanceAfterTransaction }}</td>
    <td style="color:white">{{ Transaction.TransactionComment }}</td>
  </tr>
  <tr>
    <td style="font-family:'Arial',serif;font-size:10pt"><div class="TransactionAmount">0</div></td>
    <td style="font-family:'Arial',serif;font-size:10pt">{{ Transaction.BalanceAfterTransaction }}</td>
    <td style="color:white">{{ Transaction.TransactionComment }}</td>
  </tr>
  <tr>
    <td style="font-family:'Arial',serif;font-size:10pt"><div class="TransactionAmount">1</div></td>
    <td style="font-family:'Arial',serif;font-size:10pt">{{ Transaction.BalanceAfterTransaction }}</td>
    <td style="color:white">{{ Transaction.TransactionComment }}</td>
  </tr>
</table>

There are two problems. The HTML hierarchy should be table > tr > td, and you put div > td. The second problem is addClass. This is from the jQuery library, if you want to use plain JS its possible with className. Try this:

<div id="container">
<h1>{{ Transaction.TransactionDateTime }}</h1>
<table>
    <tr>
    <th>TRANSACTION AMOUNT</th>
    <th>BALANCE AFTER TRANSACTION</th>
    <th>TRANSACTION COMMENT</th>    
    </tr><tr>
    <td style="font-family:'Arial',serif;font-size:10pt"><div id="TransactionAmount">{{ Transaction.TransactionAmount }}</div></td>
    <td style="font-family:'Arial',serif;font-size:10pt">{{ Transaction.BalanceAfterTransaction }}</td>
    <td style="color:white">{{ Transaction.TransactionComment }}</td>
    <script>
        var el = document.getElementById('TransactionAmount');
        if(el<0) {
            el.className += "red";
        } else {
            el.className += "green";
        }
    </script>    
    </tr>
</table>
<h2>Feel free to contact me !</h2>