title: DJANGO - Change text color based on value (HTML & JS)
body: <p>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 !!</p>
  
  <p>Here is my Django HTML template (linked to my view) :</p>
  
  <pre><code>{% load static %}
  
  &lt;link rel="stylesheet" type="text/css" href="{% static 'WalletJournal/style.css' %}" /&gt;
  
  &lt;div id="container"&gt;
  &lt;h1&gt;Transaction Journal&lt;/h1&gt;
  &lt;/div&gt;
  
  &lt;div id="container"&gt;
  {% if latest_transaction_list %}
  &lt;table&gt;
      &lt;tr&gt;
          &lt;th&gt;From&lt;/th&gt;
          &lt;th&gt;To&lt;/th&gt; 
          &lt;th&gt;Amount&lt;/th&gt;
          &lt;th&gt;Balance&lt;/th&gt;
          &lt;th&gt;Date/Time&lt;/th&gt;
          &lt;th&gt;Comment&lt;/th&gt;
      &lt;/tr&gt;
      {% for transaction in latest_transaction_list %}
          &lt;tr&gt;
              &lt;td style="color:white"&gt;{{ transaction.TransactionFrom }}&lt;/td&gt;
              &lt;td style="color:white"&gt;{{ transaction.TransactionTo }}&lt;/td&gt; 
              &lt;td style="font-family:'Arial',serif;font-size:10pt"&gt;&lt;div class="TransactionAmount"&gt;{{ transaction.TransactionAmount }}&lt;/div&gt;&lt;/td&gt;
              &lt;td style="font-family:'Arial',serif;font-size:10pt"&gt;{{ transaction.BalanceAfterTransaction }}&lt;/td&gt;
              &lt;td style="font-size:6pt"&gt;&lt;a href="{% url 'WalletJournal:detail' transaction.id %}"&gt;{{ transaction.TransactionDateTime }}...&lt;/a&gt;&lt;/td&gt;
              &lt;td style="color:white"&gt;{{ transaction.TransactionComment }}&lt;/td&gt;
          &lt;/tr&gt;
      {% endfor %}
  &lt;/table&gt;
  {% else %}
      &lt;p&gt;No transactions are available.&lt;/p&gt;
  {% endif %}
  &lt;/div&gt;
  
  &lt;script&gt;
      var els = document.getElementsByClassName('TransactionAmount');
  for (var i = 0; i &lt; els.length; i++) {
    var cell = els[i];
    if (cell.textContent &lt; 0) {
      cell.classList.remove('green')
    } else {
      cell.classList.add('green');
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>I know the JS code actually works since I got it from my <a href="https://stackoverflow.com/questions/42729608/html-change-color-of-text-depending-on-value-with-js/42729786?noredirect=1#comment72580895_42729786">previous question</a> and I tested it outside of my project. Unfortunately my numbers stay gray and don't change color. Even if I use a number like "1" or "-1" instead of {{ transaction.TransactionAmount }}, it still shows up in gray (I tried removing the gray basecolor from the CSS too but it didn't work).</p>
  
  <p>Here's my CSS :</p>
  
  <pre><code>@font-face {
      font-family: Eve;
      src: url('eve.ttf');
  }
  
  @font-face {
      font-family: Retro;
      src: url('retro.ttf');
  }  
  
  body {
      background: white url("images/background.gif") no-repeat right bottom;
  }
  
  h1 {
      font-family: Eve;
      color: white;
      font-size:35pt;
      text-align:center;
  }
  
  h2 {
      font-family: Eve;
      color: white;
      font-size:20pt;
      text-align:center;
  }
  
  a:link {
      color:#008000;
      text-decoration:none;
  }
  
  a:visited {
      color:#E09016;
      text-decoration:none;
  }
  
  table, td {
      font-family: Retro;
      border-style:solid;
      border-color:#3A5779;
      border-width:5px 5px 5px 13px;
      background:#1B2741;
      font-size:10pt;
      color:gray;
      padding:8px;
  }
  
  th {
      font-family: Eve;
      border-style:solid;
      border-color:#3A5779;
      border-width:5px 5px 5px 13px;
      background:#1B2741;
      font-size:14pt;
      color:white;
      padding:15px;
  }
  
  #container {
    margin: 0 auto;
    width: 1000px;
    text-align: center;
  }
  
  #TransactionAmount {
    color: #FF0000;
  }
  
  #TransactionAmount.green {
    color: #33FF3C;
  }
  </code></pre>
  
  <p>And in case it can help, here's the model I use in Django:</p>
  
  <pre><code>from django.db import models
  
  # Create your models here.
  class Transaction(models.Model):
      TransactionAmount = models.FloatField("Amount", max_length=75)
      BalanceAfterTransaction = models.FloatField("Balance", max_length=75)
      TransactionDateTime = models.DateTimeField("Date &amp; Time")
      TransactionComment = models.CharField("Comment", max_length=75)
      TransactionFrom = models.CharField("From", max_length=75)
      TransactionTo = models.CharField("To", max_length=75)
  
      def __str__(self):
          return self.TransactionComment
  </code></pre>
  
  <p>Keep in mind I have limited programming experience, and thx a lot for helping !</p>