Joséph Flames Joséph Flames - 4 months ago 9
Javascript Question

Shave off decimal of large numbers javascript

Im trying to make a function to Prettify my numbers it seems to be very glitch for example 400 displays as 4H which is right 430 displays as 4.3H still acceptable but 403 displays as 4.03H which is not acceptable here is my code not sure what to do to fix it

EDIT: As numbers get larger say 5003 they will display as 5.003K I want it to display 5K
EDIT: As numbers get larger say 5003 they will display as 5.003K I want it to display 5K
Basically the decimal place should never be more then 2
like heres a list

5000 -> 5K
5500 -> 5.5k
5050 -> 5.05k
5005 -> 5K




var ranges = [
{ divider: 1000000000000000000000000000000000 , suffix: 'Dec' },
{ divider: 1000000000000000000000000000000 , suffix: 'Non' },
{ divider: 1000000000000000000000000000 , suffix: 'Oct' },
{ divider: 1000000000000000000000000 , suffix: 'Sep' },
{ divider: 1000000000000000000000 , suffix: 'Sex' },
{ divider: 1000000000000000000 , suffix: 'Quin' },
{ divider: 1000000000000000 , suffix: 'Quad' },
{ divider: 1000000000000 , suffix: 'T' },
{ divider: 1000000000 , suffix: 'B' },
{ divider: 1000000 , suffix: 'M' },
{ divider: 1000 , suffix: 'K' },
{ divider: 100 , suffix: 'H' }
];

function INP(number, round) {
for (var i = 0; i < ranges.length; i++) {
if (number >= ranges[i].divider) {
if (round == null) {
return (number / ranges[i].divider) + ranges[i].suffix;
} else {
return (number / ranges[i].divider).toFixed(round) + ranges[i].suffix;
}
}
}
return number.toString();
}

.wrapper {
position: fixed;
top: 35%;
left: 35%;
}

<div class="wrapper">
<input type="number" id="num" placeholder="number">
<br>
<input type="number" id="rounded" placeholder="round">
<div id="output"></div>
</div>
<script>
var field = document.getElementById("num");
var div = document.getElementById("output");

field.onkeyup = function() {
var num = document.getElementById("num").value;
var rounded = document.getElementById("rounded").value;

if (rounded == true) {
var output = INP(num, true);
} else {
var output = INP(num);
}

div.innerHTML = "Output: " + output;
}
</script>




Answer

There is some bugs in your code

  1. if (rounded == true) it will be always false the input value of number field never become true.
  2. INP(num, true) you are passing true as the argument, there is nothing to do with that. Expected parameter is a number as per your code.
  3. if (round == null) also always false, if the second input field is empty value would be empty string not null so change it to if (round == '')

var ranges = [{
  divider: 1000000000000000000000000000000000,
  suffix: 'Dec'
}, {
  divider: 1000000000000000000000000000000,
  suffix: 'Non'
}, {
  divider: 1000000000000000000000000000,
  suffix: 'Oct'
}, {
  divider: 1000000000000000000000000,
  suffix: 'Sep'
}, {
  divider: 1000000000000000000000,
  suffix: 'Sex'
}, {
  divider: 1000000000000000000,
  suffix: 'Quin'
}, {
  divider: 1000000000000000,
  suffix: 'Quad'
}, {
  divider: 1000000000000,
  suffix: 'T'
}, {
  divider: 1000000000,
  suffix: 'B'
}, {
  divider: 1000000,
  suffix: 'M'
}, {
  divider: 1000,
  suffix: 'K'
}, {
  divider: 100,
  suffix: 'H'
}];

function INP(number, round) {
  for (var i = 0; i < ranges.length; i++) {
    if (number >= ranges[i].divider) {
      if (round == '') {
        return (number / ranges[i].divider) + ranges[i].suffix;
      } else {
        var res = (number / ranges[i].divider).toFixed(round),
          fr = res - parseInt(res, 10);
        return (fr > 0 ? res : parseInt(res, 10)) + ranges[i].suffix;
      }
    }
  }
  return number.toString();
}
.wrapper {
  position: fixed;
  top: 35%;
  left: 35%;
}
<div class="wrapper">
  <input type="number" id="num" placeholder="number">
  <br>
  <input type="number" id="rounded" placeholder="round">
  <div id="output"></div>
</div>
<script>
  var field = document.getElementById("num");
  var div = document.getElementById("output");

  field.onkeyup = function() {
    var num = document.getElementById("num").value;
    var rounded = document.getElementById("rounded").value;

    var output = INP(num, rounded);

    div.innerHTML = "Output: " + output;
  }
</script>

Comments