DJANGO - 値に基づいてテキストの色を変更する（HTML＆JS）

Question

私はDjangoでHTML形式で表を作成しています。番号が負の場合は番号の色を赤に変更し、番号が正の場合は緑に変更します。私はこれのJSを使用する必要があることを知っているが、私はそれを動作させることができませんでした。どんな助けでも大歓迎です!!ここで

は（私のビューにリンクされている）私のジャンゴHTMLテンプレートです：

{% load static %} 

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

<div id="container"> 
<h1>Transaction Journal</h1> 
</div> 

<div id="container"> 
{% if latest_transaction_list %} 
<table> 
    <tr> 
     <th>From</th> 
     <th>To</th> 
     <th>Amount</th> 
     <th>Balance</th> 
     <th>Date/Time</th> 
     <th>Comment</th> 
    </tr> 
    {% for transaction in latest_transaction_list %} 
     <tr> 
      <td style="color:white">{{ transaction.TransactionFrom }}</td> 
      <td style="color:white">{{ transaction.TransactionTo }}</td> 
      <td style="font-family:'Arial',serif;font-size:10pt"><div class="TransactionAmount">{{ transaction.TransactionAmount }}</div></td> 
      <td style="font-family:'Arial',serif;font-size:10pt">{{ transaction.BalanceAfterTransaction }}</td> 
      <td style="font-size:6pt"><a href="{% url 'WalletJournal:detail' transaction.id %}">{{ transaction.TransactionDateTime }}...</a></td> 
      <td style="color:white">{{ transaction.TransactionComment }}</td> 
     </tr> 
    {% endfor %} 
</table> 
{% else %} 
    <p>No transactions are available.</p> 
{% endif %} 
</div> 

<script> 
    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'); 
    } 
} 
</script> 

私はprevious questionからそれを持って、私は私のプロジェクトの外でそれをテストして以来、JSコードが実際に動作を知っています。残念ながら私の数字はグレーのままで、色は変わりません。 {{transaction.TransactionAmount}}の代わりに "1"や "-1"のような数字を使用しても、それはまだ灰色で表示されます（CSSから灰色のベースカラーを削除しようとしましたが、うまくいかなかった）。

は、ここに私のCSSです：

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

そして、それは助けることができる場合は、ここで私はジャンゴでの使用モデルがあります：

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 & 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 

私はプログラミングの経験、およびTHX多くが限られている点に注意してください助けるために！

Answer 1

数字が負の場合は赤に、数字が正の場合は緑に変更したいと考えています。私はこれのJSを使用する必要があることを知っているが、私はそれを動作させることができませんでした。

あなたは本当にJSでこれを行う必要はありませんので、私は両方が元の問題を解決し、あなたのコードを簡素化し、代替としてこれを提供してきました。プログラミングの経験が限られている場合は、かなり長いJSソリューションではなく、Djangoテンプレートを使用してこれを管理する方が簡単な方がよいでしょう。もちろん、あなたがJSを修正してそれをあなたのサイトの他の理由で必要とするために使用したいなら、他の答えがそれを修正します。 :)

私は解読のためにこれを解消しました。 （これは、CSSファイルとスタイリングインラインの両方を持つことも悪い習慣だ！）

 <tr> 
      <td>{{ transaction.TransactionFrom }}</td> 
      <td>{{ transaction.TransactionTo }}</td> 
      <td> 
       {% if transaction.TransactionAmount < 0 %} 
       <div class="TransactionAmount NegativeTransaction"> 
       {% else %} 
       <div class="TransactionAmount PositiveTransaction"> 
       {% endif %} 
        {{ transaction.TransactionAmount }} 
       </div> 
      </td> 
      <td>{{ transaction.BalanceAfterTransaction }}</td> 
      <td><a href="{% url 'WalletJournal:detail' transaction.id %}">{{ transaction.TransactionDateTime }}...</a></td> 
      <td>{{ transaction.TransactionComment }}</td> 
     </tr> 

し、適切なCSS：スクリプトタグ内

.NegativeTransaction { 
    color: #FF0000; 
} 

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

Answer 2

テストしたところ、コードが正常に動作しているようです。私はちょうどredクラスを追加しなければならなかった。それはあなたが上記のCSSコードに存在しないので、

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') 
    cell.classList.add('red') 
    } else { 
    cell.classList.remove('red'); 
    cell.classList.add('green'); 
    } 
} 

はまた、多分あなたは単に、.greenと.redのためにあなたのCSSを忘れてしまいました。

Here, take a look at it in JSFiddle

。

Answer 3

あなたのHTMLコードでは、tss要素のクラスとして 'TransactionAmount'を定義していますが、cssでは 'TransactionAmount'をID：#TransactionAmountと#TransactionAmount.greenとみなしてルールを定義しています。したがって、ルールを.TransactionAmountと.TransactionAmount.greenに変更するとコードが修正されるはずです。