PHPのループ中の値の色を変更します

Question

私はデータベースからの投稿をループしていますが、値に応じて投票の色を変更しようとしています。 0 =黒、< 0 =赤、> 0 =緑。私の最初の試みは、投票値のh1タグにidを設定し、そのように色を変更することでした。最初の投稿では機能しましたが、他の投稿には影響しません。誰にどのように私はこれを行うことができるの他のアイデアを持っていますか？

PHP & HTML：

while ($row = $stmt->fetch()) { 
echo '<h1 id="scoreCounter">'.$row['votes'].'</h1>'; 
} 

はjavascript：

var score = document.getElementByid("scoreCounter"); 
var scoreValue = 10; 
checkScore(); 



function checkScore() { 
if (scoreValue < 0) { 
    score.style.color = "#FF586C"; 
} else if (scoreValue > 0) { 
    score.style.color = "#6CC576"; 
} else { 
    score.style.color = "#666666"; 
} 
} 

Answer 1

方法が設定される色に応じて、見出しにクラスを追加することです。この

h1.zero { color: #000; } 
h1.pos { color: #0F0; } 
h1.neg { color: #F00; } 

Answer 2

idのため

while ($row = $stmt->fetch()) { 
    $class = $row['votes'] == 0 ? 'zero' : ($row['votes'] < 0 ? 'neg' : 'pos'); 
    echo '<h1 id="scoreCounter" class="' . $class . '">'.$row['votes'].'</h1>'; 
} 

と定義するCSSスタイルは、HTML内で一意でなければなりません。代わりにclassを使用し、getElementsByClassName！

Answer 3

同じIDを持つ複数の要素を決して作成しないでください。

ここには、クラス名が'score-counter'のすべての要素が検索され、すべてが列挙され、score属性の値に基づいてテキストの色が変更されます。

var scoreEls = document.querySelectorAll(".score-counter"); 
 
if (scoreEls.length>0) { 
 
    scoreEls.forEach(checkScore); 
 
} 
 

 
function checkScore(el) { 
 
    var scoreValue = Number(el.getAttribute('score')); 
 
    if (scoreValue < 0) { 
 
    el.style.color = "#FF586C"; 
 
    } 
 
    else if (scoreValue > 0) { 
 
    el.style.color = "#6CC576"; 
 
    } 
 
    else { 
 
    el.style.color = "#666666"; 
 
    } 
 
}

<div>Title 1: <span class="score-counter" score="30">30</span></div> 
 
<div>Title 2: <span class="score-counter" score="0">0</span></div> 
 
<div>Title 3: <span class="score-counter" score="-5">-5</span></div> 
 
<div>Title 4: <span class="score-counter" score="12">12</span></div> 
 
<div>Title 5: <span class="score-counter" score="-53">-53</span></div> 
 
<div>Title 4: <span class="score-counter" score="0">0</span></div>

あなたのPHPにはこのようなものにする必要があります：**必須**ユニークである

while ($row = $stmt->fetch()) { 
    echo '<div>Title 4: <span class="score-counter" score="'.$row['votes'].'">'.$row['votes'].'</span></div>'; 
}