Ändern Sie die Farbe des Wertes in PHP während Schleife

Question

Ich bin meine Post aus der Datenbank looping und ich versuche, die Farbe der Stimmen abhängig von Wert zu ändern. Wenn 0 = Schwarz, < 0 = Rot,> 0 = Grün. Mein erster Versuch war, eine ID für das h1-Tag für den Stimmwert zu setzen und die Farbe auf diese Weise zu ändern. Es funktionierte für den ersten Beitrag, aber alle anderen Beiträge sind nicht betroffen. Hat jemand eine andere Vorstellung davon, wie ich das machen könnte?

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

Eine Möglichkeit wäre, eine Klasse der Überschrift hinzuzufügen, je nach Farbe eingestellt werden.

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

und CSS-Stile für diese

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

Answer 2

id s definieren sollten in HTML eindeutig sein. Verwenden Sie stattdessen class und getElementsByClassName!

Answer 3

Sie sollten niemals mehr als ein Element mit derselben ID erstellen.

Hier ist ein Stück Code, der alle Elemente mit einem Klassennamen 'score-counter' findet und dann alle aufzählt und die Textfarbe basierend auf dem Wert im score Attribut ändert.

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>

Ihre PHP, so etwas sein müssten:

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