How to make a number round to eight decimal places and with the different color?

Question

Apologies for asking what looks like a comment asked question but I cannot seem to be able to solve.

How do I write 0.2 to round to eight decimal places and make it with the different color, such as belows

Could anyone tell me how to solve ??

Thank you very much!

What do you mean by make it with different color? Like displaying it on page? — Matus Dubrava, May 19 '18 at 10:26
@user184994 https://stackoverflow.com/questions/11832914/round-to-at-most-2-decimal-places-only-if-necessary#comment42416958_11832950 — deEr., May 19 '18 at 10:27
thank you! but how to make it with different color like in the example?@user184994 — Sylvia, May 19 '18 at 10:30

score 1 · Accepted Answer · answered May 19 '18 at 10:30

1

You need to follow these steps:

Create a fixed string representation of the number using toFixed(8) which gives you 8 decimal places.
Get the substring to separate it into two parts as you desired to apply different color to each part.
Create a span element for that each parts and add a class to them.
Add this final HTML in your web page.

function changeNum(elemId, num){
  var fixed8 = num.toFixed(8);
  var substrWhite = fixed8.substr(0, fixed8.indexOf('.')+3);
  var substrGrey = fixed8.substr(fixed8.indexOf('.')+3, fixed8.length);
  var nHTML = "<span class='white'>"+substrWhite+"</span><span class='grey'>"+substrGrey+"</span>"
  document.getElementById(elemId).innerHTML = nHTML;
}

var num = 0.2;
changeNum('content1', num);
num = 0.56;
changeNum('content2', num);
num = 0.123;
changeNum('content3', num);

.white{
  color: white;
}
.grey{
  color: grey;
}
div{
  background: #444;
}

<div id='content1'></div>
<div id='content2'></div>
<div id='content3'></div>

answered May 19 '18 at 10:30

Ankit Agarwal

30,378
5
37
62

Thanks for your help! – Sylvia May 19 '18 at 10:37
@Sylvia happy to help – Ankit Agarwal May 19 '18 at 10:38
[`toFixed()` is — not — browser consistent.](https://stackoverflow.com/questions/11832914/round-to-at-most-2-decimal-places-only-if-necessary) – deEr. May 19 '18 at 10:41
1

@AjAX. there are still many such methods that are not browser consistent like say `includes()` which do not work in IE. Does that mean we cannot or should not use it. It depends on your preference for that. – Ankit Agarwal May 19 '18 at 10:43

How to make a number round to eight decimal places and with the different color?

1 Answers1