Von_Kavalier Von_Kavalier - 6 months ago 8
PHP Question

Compare floats in javascript and change the color of the highest

I have a HTML table, made in php with the values in my database.

I want to get the highest price and change the color of this one (same for the smallest price).
But in my script I think there is a problem in my comparison because it misses 1/2 value. (my english is not really good so I hope you'll understand with the code)

<table>
<tr>
<th>Rang</th>
<th>Nom</th>
<th>Prix(€)</th>
<th >Description</th>
<th>Précisions d'achat</th>
</tr>

<?php
$i=1;
while($donnees = $resultPop->fetch()){
echo '<tr>
<td>'.$i.'</td>
<td><a href="'.$donnees['POP_LINK'].'">'.$donnees['POP_NOM'].'</a></td>
<td class="prix">'.$donnees['POP_PRIX'].'</td>
<td>'.$donnees['POP_DESCRIPTION'].'</td>
<td>'.$donnees['POP_PRECISION'].'</td>
</tr>';
$i++;
}
?>
</table>
<script>
var prix = new Array;
prix[0] = document.getElementsByClassName('prix');
var i = 0;
var cheapest = 0;
while(i< 7){
console.log(i);
if (Number(prix[0][i].innerHTML) > Number(prix[0][i+1].innerHTML)){
cheapest = prix[0][i+1];
console.log(cheapest.innerHTML);
}
i++;
}
cheapest.style.color = 'red';
</script>


Or I thought maybe doing a php function but then I don't know how to change the color of the text...

Here is the console output :

0
1
11.17
2
3
12.90
4
5
12.90
6


The complete values are : 12.73 12.90 11.17 22.90 12.90 14.90 12.90 12.90
The one in bold is the one displayed in red.

Here is the rendered HTML
And the code :

<table>
<tr>
<th>Rang</th>
<th>Nom</th>
<th>Prix(€)</th>
<th >Description</th>
<th>Précisions d'achat</th>
</tr>

<tr>
<td>1</td>
<td><a href="">Twisty - AHS</a></td>
<td class="prix">12.73</td>
<td>Twisty le clown dans la saison 4 d'American Horror Story</td>
<td>/</td>
</tr>12.73<tr>
<td>2</td>
<td><a href="">Agent Smith - Matrix</a></td>
<td class="prix">12.90</td>
<td>L'agent Smith dans Matrix</td>
<td>Prendre la figurine de l'agent Smith</td>
</tr>12.90<tr>
<td>3</td>
<td><a href="">Finn - Adventure Time</a></td>
<td class="prix">11.17</td>
<td>Finn dans Adventure Time</td>
<td>Frais de port gratuit. Sur Amazon</td>
</tr>11.17<tr>
<td>4</td>
<td><a href="">Titan Colossal - SNK</a></td>
<td class="prix">22.90</td>
<td>Le Titan Colossal de l'anime Shingeki No Kyojin. Figurine plus grande que d'hab donc prix + élevé</td>
<td>/</td>
</tr>22.90<tr>
<td>5</td>
<td><a href="">Marty McFly - BTTF</a></td>
<td class="prix">12.90</td>
<td>Marty Mc Fly dans la trilogie Retour vers le futur</td>
<td>/</td>
</tr>12.90<tr>
<td>6</td>
<td><a href="">The Dude - TBL</a></td>
<td class="prix">14.90</td>
<td>Le Duc du film The Big Lebowski</td>
<td>/</td>
</tr>14.90<tr>
<td>7</td>
<td><a href="">Wall-E</a></td>
<td class="prix">12.90</td>
<td>Wall-E du film Disney éponyme</td>
<td>/</td>
</tr>12.90<tr>
<td>8</td>
<td><a href="">Tim The Enchanter - HG</a></td>
<td class="prix">12.90</td>
<td>Tim l'Enchanteur du film Sacré Graal des Monty Python</td>
<td>Prendre Tim l'Enchanteur. Celui avec les cornes et le lapin</td>
</tr>12.90 </table>
<script>
var prix = new Array;
prix[0] = document.getElementsByClassName('prix');
var i = 0;
var cheapest = 0;
while(i< 7){
console.log(i);
if (Number(prix[0][i].innerHTML) > Number(prix[0][i+1].innerHTML)){
cheapest = prix[0][i+1];
console.log(cheapest.innerHTML);
}
i++;
}
cheapest.style.color = 'red';

</script>


If anyone could help me that would be awesome. And tell me if you need more details.

Answer

You can use Array.prototype.slice() to convert HTMLCollection to an array, Array.prototype.map() to return .innerHTML of elements as an array; Math.min(), Math.max(), Array.prototype.indexOf() to select element from HTMLColloection at index where greastest or least number is .innerHTML

var prix = document.getElementsByClassName("prix");
// added `+` operator to convert string to number
var n = [].slice.call(prix).map(function(el) {return +el.innerHTML});
var max = Math.max.apply(Math, n);
var maxIndex = n.indexOf(max);
var min = Math.min.apply(Math, n);
var minIndex = n.indexOf(min);
prix[maxIndex].style.color = "green";
prix[minIndex].style.color = "red";
Comments