Change color of value in php while loop

Question

I am looping out my posts from the database and i am trying to change color of the votes depending on value. If 0 = Black, < 0 = Red, > 0 = Green. My first attemp was to set an id on the h1 tag for the vote value and modify the color from that way. It worked for the first post but all other posts are not affected. Does anyone have any other idea of how i could do this?

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

IDs must be unique. Your PHP loop duplicates them if there's more than one row. — j08691
– j08691, Commented Dec 29, 2017 at 18:22
"It worked for the first post but all other posts are not affected" - Use a class. — Funk Forty Niner
– Funk Forty Niner, Commented Dec 29, 2017 at 18:23

Philipp · Accepted Answer · 2017-12-29 18:24:05Z

6

A way would be to add an class to the heading, depending on the color to be set.

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

and define css styles for this

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

answered Dec 29, 2017 at 18:24

Philipp

15.7k4 gold badges38 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Funk Forty Niner Over a year ago

Side note: On the rare instance that this should fail for some reason, adding !important to the rules would help override any previously set rules if a stylesheet such as bootstrap were used.

csabinho · Accepted Answer · 2017-12-29 18:25:05Z

0

ids should be unique in HTML. Use class instead and getElementsByClassName!

answered Dec 29, 2017 at 18:25

csabinho

1,6071 gold badge19 silver badges29 bronze badges

1 Comment

csabinho Over a year ago

I answered almost immediately after it was posted. Such things can happen.

Intervalia · Accepted Answer · 2017-12-29 18:33:49Z

You should never create more than one element with the same ID.

Here is a chunk of code that finds all of the elements with a class name of 'score-counter' and then enumerates though all of them and changes the text color based on the value in the score attribute.

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>

Your PHP would need to be something like this:

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

Collectives™ on Stack Overflow

Change color of value in php while loop

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related