 Change font colour based on data value |
  |
| Cartoony |
 May 20 2024, 04:06 AM
Post
#1
|
|
Newbie  Group: Members Posts: 12 Joined: 27-September 23 Member No.: 29,062  |
EDIT - there might be an easier way to fix this - if the data in the json is "-" can I make the HTML display the dash? Currently it displays a zero. A dash would be fine.
Basically I want it to display a 0 where the json value is 0, but nothing (or a dash) where the json value is a dash. I have a HTML page which displays a cricket scoreboard pulling data from a json file. Everything works but there are some numbers which I don't want displayed if they're 0 The fonts are defined in a css in this format: CODE td.digit2 { font-family: s7, Fallback, sans-serif; /*font-size: 110px;*/ font-size: 2vw; text-align: center; margin: .5rem 0 .5rem -4px; text-shadow: #444 .4px 1px 1px; color: yellowgreen; } Is there a way to make the HTML use a new format (td.digit2.black) when a value in the HTLP is zero? I will need to do this on a per-value basis, not globally, as for example I want BatsmanScore to display a 0 but I don't want Target to display 0 Here's my HTML CODE <html> <head> <meta content="text/html;charset=utf-8" http-equiv="Content-Type"> <meta content="utf-8" http-equiv="encoding"> <link rel="stylesheet" type="text/css" href="./css/spectatornoborders.css"> <script src="./jquery/jquery-3.5.1.min.js"></script> <!--<script src="./jquery/jquery.mobile-1.3.0.min.js"></script> <script src="./jquery/mobiscroll.custom-2.4.4.min.js"></script> --> <script type="text/javascript"> $(function() { getStatus(); }); function getStatus() { $fileName = "scorePCS.json?date=" + new Date().toLocaleString(); //ask for the score.json file generated by updateSpectator.php. Include the date to stop the browser caching an old copy $.getJSON($fileName, function(data) { document.getElementById("BatTeamName").innerHTML=formatDigits(data.BatTeamName); document.getElementById("total").innerHTML=formatDigits(data.total); document.getElementById("wickets").innerHTML=formatDigits(data.wickets); document.getElementById("overs").innerHTML=formatDigits(data.overs); // document.getElementById("OversBowled").innerHTML=formatDigits(data.OversBowled); document.getElementById("OversRem").innerHTML=formatDigits(data.OversRem); //Placeholder for Target - dealt with later document.getElementById("RunsReq").innerHTML=formatDigits(data.RunsReq); //RRR ReqRunRate document.getElementById("ReqRunRate").innerHTML=formatDigits(data.ReqRunRate); //LWK document.getElementById("LastWicket").innerHTML=formatDigits(data.LastWicket); //PSHIP needs to be a calculation BTS-LWK //DLT document.getElementById("DLSTarget").innerHTML=formatDigits(data.DLSTarget); //DLP document.getElementById("DLSPar").innerHTML=formatDigits(data.DLSPar); document.getElementById("BatAname").innerHTML=formatDigits(data.Bat1Name); document.getElementById("BatAscore").innerHTML=formatDigits(data.BatAscore); document.getElementById("BatABallsFaced").innerHTML=formatDigits(data.BatABallsFaced); document.getElementById("BatAonStrike").innerHTML=formatDigits(data.Bat1onStrike); document.getElementById("BatBname").innerHTML=formatDigits(data.Bat2Name); document.getElementById("BatBscore").innerHTML=formatDigits(data.BatBscore); document.getElementById("BatBBallsFaced").innerHTML=formatDigits(data.BatBBallsFaced); document.getElementById("BatBonStrike").innerHTML=formatDigits(data.Bat2onStrike); document.getElementById("FieldTeamName").innerHTML=formatDigits(data.FieldTeamName); document.getElementById("CurrBowlName").innerHTML=formatDigits(data.CurrBowlName); document.getElementById("CurrBowlFigs").innerHTML=formatDigits(data.CurrBowlFigs); document.getElementById("PrevBowlName").innerHTML=formatDigits(data.PrevBowlName); document.getElementById("PrevBowlFigs").innerHTML=formatDigits(data.PrevBowlFigs); document.getElementById("CurrentOver").innerHTML=formatDigits(data.CurrentOver); { // document.getElementById("target2Heading").className = "noborder"; // document.getElementById("target2Heading").innerHTML=""; // document.getElementById("target2").className = "noborder"; // document.getElementById("target2").innerHTML=""; document.getElementById("target1").innerHTML=formatDigits(data.target); // document.getElementById("dl").innerHTML=formatDigits(data.dltarget); } }); setTimeout("getStatus()",10000); //rerun the function every 10 seconds (including loading the score.json file) } function formatDigits(digits) { var returnStr=""; //split the value into its digit parts, as we want to strip the dashes digitArray=digits.split(""); for (i=0; i<digitArray.length; i++) { //ignore this digit if it is a dash if (digitArray[i] != "-") { returnStr=returnStr.concat(digitArray[i]); } } // if the input was all dashes, then lets return a 0 if (returnStr==""){ returnStr="0"; } return returnStr; } </script> </head> <body> <center> <table width="95%" id="topRow"> <tr class="rowpad"> <td align="center" valign="middle"> </td> <td align="center" valign="middle">Total</td> <td align="center" valign="middle">Wickets</td> <td align="center" valign="middle">Overs</td> <td align="center" valign="middle">OVRem</td> <td align="center" valign="middle">Target</td> </tr> <tr class="rowpad"> <td align="center" valign="middle" class="digit" id=BatTeamName>-</td> <td align="center" valign="middle" class="digit" id=total>-</td> <td align="center" valign="middle" class="digit" id=wickets>-</td> // <td align="center" valign="middle" class="digit" id=overs>-</td> <td align="center" valign="middle" class="digit" id=OversRem>-</td> <td align="center" valign="middle" class="digit" id=target1>-</td> </tr> // <tr class="rowpad"> <td align="center" valign="middle"> </td> <td align="center" valign="middle"> </td> <td align="center" valign="middle"> </td> <td align="center" valign="middle"> </td> <td align="center" valign="middle"> </td> <td align="center" valign="middle"> </td> </tr> <tr class="rowpad"> <td align="center" valign="middle">Runs Req</td> <td align="center" valign="middle">Req Rate</td> <td align="center" valign="middle">Last Wkt</td> <td align="center" valign="middle">Pship</td> <td align="center" valign="middle">DL Tgt</td> <td align="center" valign="middle">DL Par</td> </tr> <tr class="rowpad"> <td align="center" valign="middle" class="digit" id=RunsReq>-</td> <td align="center" valign="middle" class="digit" id=ReqRunRate>-</td> <td align="center" valign="middle" class="digit" id=LastWicket>-</td> //lastwkt <td align="center" valign="middle"> </td> <td align="center" valign="middle" class="digit" id=DLSTarget>-</td> //DLTgt <td align="center" valign="middle" class="digit" id=DLSPar>-</td> //DLPar </tr> <tr class="rowpad"> <td align="center" valign="middle"> </td> <td align="center" valign="middle"> </td> <td align="center" valign="middle"> </td> <td align="center" valign="middle"> </td> <td align="center" valign="middle"> </td> <td align="center" valign="middle"> </td> </tr> <tr class="rowpad"> <td align="center" valign="middle"> </td> <td align="center" valign="middle">Score</td> <td align="center" valign="middle">Balls</td> <td align="center" valign="middle">On Str</td> <td align="center" valign="middle"> </td> <td align="center" valign="middle"> </td> </tr> <tr class="rowpad"> <td align="center" valign="middle" class="digit" id=BatAname>-</td> <td align="center" valign="middle" class="digit" id=BatAscore>-</td> <td align="center" valign="middle" class="digit" id=BatABallsFaced>-</td> <td align="center" valign="middle" class="digit" id=BatAonStrike>-</td> <td align="center" valign="middle"> </td> <td align="center" valign="middle"> </td> </tr> <tr class="rowpad"> <td align="center" valign="middle" class="digit" id=BatBname>-</td> <td align="center" valign="middle" class="digit" id=BatBscore>-</td> <td align="center" valign="middle" class="digit" id=BatBBallsFaced>-</td> <td align="center" valign="middle" class="digit" id=BatBonStrike>-</td> <td align="center" valign="middle"> </td> <td align="center" valign="middle"> </td> </tr> <tr class="rowpad"> <td align="center" valign="middle"> </td> <td align="center" valign="middle"> </td> <td align="center" valign="middle"> </td> <td align="center" valign="middle"> </td> <td align="center" valign="middle"> </td> <td align="center" valign="middle"> </td> </tr> <tr class="rowpad"> <td align="center" valign="middle" class="digit" id=FieldTeamName>-</td> <td align="center" valign="middle" class="digit" id=CurrBowlName>-</td> <td align="center" valign="middle" class="digit" id=PrevBowlName>-</td> <td align="center" valign="middle"> </td> <td align="center" valign="middle">Current Over</td> <td align="center" valign="middle"> </td> </tr> <tr class="rowpad"> <td align="center" valign="middle"> </td> <td align="center" valign="middle" class="digit" id=CurrBowlFigs>-</td> <td align="center" valign="middle" class="digit" id=PrevBowlFigs>-</td> <td align="center" valign="middle"> </td> <td align="center" valign="middle" class="digit" id=CurrentOver>-</td> <td align="center" valign="middle"> </td> </tr> </table> </center> </body> </html> Just in case, here's the JSON file: CODE {"total":"--0","wickets":"0","overs":"-0","runsreq":"---","bata":"--0","batb":"--0","target":"---","batanumber":"-1","batbnumber":"-2","dltarget":"000","lastwkt":"---","pship":"---","lastman":"---"} This post has been edited by Cartoony: May 20 2024, 04:11 AM |
  |
 
|
| Christian J |
May 20 2024, 12:27 PM
Post
#2
|
|
. Group: WDG Moderators Posts: 9,678 Joined: 10-August 06 Member No.: 7 |
QUOTE(Cartoony @ May 20 2024, 11:06 AM)  EDIT - there might be an easier way to fix this - if the data in the json is "-" can I make the HTML display the dash? Currently it displays a zero. A dash would be fine. I only took a quick look, but it seems this part creates the zero: CODE // if the input was all dashes, then lets return a 0 if (returnStr==""){ returnStr="0"; } So maybe you could change CODE returnStr="0"; to CODE returnStr="-"; ? My suggestion here is just a hack, it can likely be done in a more elegant way. |
|
|
|
| Cartoony |
May 21 2024, 01:11 AM
Post
#3
|
|
Newbie Group: Members Posts: 12 Joined: 27-September 23 Member No.: 29,062 |
QUOTE(Christian J @ May 20 2024, 06:27 PM) QUOTE(Cartoony @ May 20 2024, 11:06 AM) EDIT - there might be an easier way to fix this - if the data in the json is "-" can I make the HTML display the dash? Currently it displays a zero. A dash would be fine. I only took a quick look, but it seems this part creates the zero: CODE // if the input was all dashes, then lets return a 0 if (returnStr==""){ returnStr="0"; } So maybe you could change CODE returnStr="0"; to CODE returnStr="-"; ? My suggestion here is just a hack, it can likely be done in a more elegant way. Thank you for the reply but I don't want ALL the zeroes to display as a dash, e.g. if a batsman's score is 0, I need it to display a 0. |
|
|
|
| Christian J |
May 21 2024, 06:05 AM
Post
#4
|
|
. Group: WDG Moderators Posts: 9,678 Joined: 10-August 06 Member No.: 7 |
QUOTE(Cartoony @ May 21 2024, 08:11 AM) QUOTE(Christian J @ May 20 2024, 06:27 PM) QUOTE(Cartoony @ May 20 2024, 11:06 AM) EDIT - there might be an easier way to fix this - if the data in the json is "-" can I make the HTML display the dash? Currently it displays a zero. A dash would be fine. I only took a quick look, but it seems this part creates the zero: CODE // if the input was all dashes, then lets return a 0 if (returnStr==""){ returnStr="0"; } So maybe you could change CODE returnStr="0"; to CODE returnStr="-"; ? My suggestion here is just a hack, it can likely be done in a more elegant way. Thank you for the reply but I don't want ALL the zeroes to display as a dash, e.g. if a batsman's score is 0, I need it to display a 0. In my understanding the code above applies to scores (called "input" in the script comment, I believe) that contain only dashes. So if a batsman's score is 0, it's not a dash and should display a 0. But I haven't tested this, and can't say I understand how it all works yet. |
|
|
|
| Cartoony |
May 22 2024, 02:36 AM
Post
#5
|
|
Newbie Group: Members Posts: 12 Joined: 27-September 23 Member No.: 29,062 |
QUOTE(Christian J @ May 21 2024, 12:05 PM) In my understanding the code above applies to scores (called "input" in the script comment, I believe) that contain only dashes. So if a batsman's score is 0, it's not a dash and should display a 0. But I haven't tested this, and can't say I understand how it all works yet. I think that's fixed it, thank you. This post has been edited by Cartoony: May 22 2024, 02:37 AM |
|
|
|
|
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 3rd June 2024 - 01:57 AM |
Invision Power Board
© 2024 IPS, Inc.
Licensed to: HTMLHelp.com, LLC