Have a javascript ready, need to insert commas in numerical results

Question

I have cobbled together a script that takes a variable, does two separate math computations to it, and displays both answers on the screen.

I need for the script to place commas into both "generated" answers when the results exceed 1,000. (Notice, default values appearing in the HTML already have commas in place.)

However, I do not need for the results to show any trailing decimal points.

Here's my JavaScript and some accompanying HTML...

function return_selected(currentID) {
  var savings = document.getElementById(currentID);
  var valueCalc = savings.options[savings.selectedIndex].value;
  return valueCalc;
}

// computing potential at 3%
function firstCalc() {
  var calcPrice1 = return_selected('soldfor') * .03 - 595;
  document.getElementById('savings3').innerHTML = "$" + calcPrice1;
  return calcPrice1;
}

// computing potential at 6%
function secondCalc() {
  var calcPrice2 = return_selected('soldfor') * .06 - 595;
  document.getElementById('savings6').innerHTML = "$" + calcPrice2;
  return calcPrice2;
}

document.addEventListener("DOMContentLoaded", firstCalc);
document.addEventListener("DOMContentLoaded", secondCalc);
// should listen for all select option
document.addEventListener("change", firstCalc);
document.addEventListener("change", secondCalc);

<!--HTML Routine to DISPLAY COMPUTATIONS -->**

<div class="box">
  <div class="content">
    <p>Start with this number
      <select name="" id="soldfor">
            <option value="100000">$100,000</option>
            <option value="200000">$200,000</option>
            <option value="300000">$300,000</option>
            <option value="400000" selected>$400,000</option>
            <option value="450000">$450,000</option>
          </select>
    </p>Compute a new number <span id="savings3">$11,405</span>
    <p>
      <p>and compute another number
        <span id="savings6">$23,405</span>
  </div>
</div>

Numbers in modern javascript have a `.toLocaleString()` method and the Math object has always had round/floor/ceil functions to remove decimal points as required — Jaromanda X, Jun 19 '17 at 01:01

score 0 · Accepted Answer · answered Jun 19 '17 at 01:31

0

function addComma(val) {
    while (/(\d+)(\d{3})/.test(val.toString())) {
        val = val.toString().replace(/(\d+)(\d{3})/, '$1' + ',' + '$2');
    }
    return val;
}

var calcPrice1 = 100000 * .03 - 595;
document.getElementById('savings3').innerHTML = "$" + addComma(Math.trunc(calcPrice1));

var calcPrice2 = 100000 * .06 - 595;
document.getElementById('savings6').innerHTML = "$" + addComma(Math.trunc(calcPrice2));

It will work for you.

answered Jun 19 '17 at 01:31

Tien Nguyen Ngoc

1,555
1
8
17

Thanks so much (to everyone) for helping this neophyte navigate through a tough situation! – Ittledoo Jun 19 '17 at 16:45

score 0 · Answer 2 · answered Jun 19 '17 at 01:57

You can use Number.toLocaleString() to format numbers according to Locale conventions.

var n1 = 1e5;
var n2 = 1e6;

console.log('n1:',n1.toLocaleString());
//=> n1: 100,000
console.log('n2:',n2.toLocaleString());
//=> n2: 1,000,000

See Number.prototype.toLocaleString() @ MDN.

Mehdi Dehghani · Answer 3 · 2017-06-19T02:20:19.067

0

if (!Number.prototype.toMoney) {
    Number.prototype.toMoney = function () {                   
        return this.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    };
}

console.log((4500000.00).toMoney()); // 4,500,000

OR

var format = function (n) {                   
  return n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
};

console.log(format(10500)); // 10,500

edited Jun 19 '17 at 02:20

answered Jun 19 '17 at 02:14

Mehdi Dehghani

10,970
6
59
64

Have a javascript ready, need to insert commas in numerical results

3 Answers3