Adding a comma to numbers larger than a thousand in JavaScript

Question

I'm building a financing calculator and all of the numbers being outputted to the DOM are in the thousands.

I currently am using .toLocaleString() on one number in my code, and it works (the main productPrice number). I used .toLocatelString() when outputting to the DOM.

However, I can't seem to figure out why when using the same way, it doesn't work on the other numbers. Specifically, the Down Payment, Total and Per Month numbers.

Here's the JS code (the code I've entered .toLocaleString() is at the very bottom):

"use strict";

// Define product price / tax

const productPrice = 105000;
const tax = 0.13;

// Append product price to DOM

const productPriceID = document.getElementById("product-price");
productPriceID.innerHTML = productPrice.toLocaleString();

// Grab the id's of the main product price, down payment, total, per month and button for DOM appending

const downPaymentValue = document.getElementById("down-payment-value");
const totalValue = document.getElementById("total-value");
const perMonthValue = document.getElementById("per-month-value");
const calculateBtn = document.getElementById("calculate");

///////// Calculations

calculateBtn.addEventListener("click", calculate);

function calculate() {
  // Grab the value of the month selected
  const monthSelected = document.querySelector('input[name="month"]:checked')
    .value;
  // Grab the value of the down payment percentage selected
  const percentageSelected = document.querySelector(
    'input[name="percent"]:checked'
  ).value;
  // Calculate down payment percentage based on main price
  const totalDownPayment = (productPrice * percentageSelected).toFixed(2);
  // Calculate the total
  const totalPrice = (productPrice - totalDownPayment).toFixed(2);
  // Calculate the per month
  const perMonth = (totalPrice / monthSelected).toFixed(2);
  // Append down payment to DOM
  downPaymentValue.innerHTML =
    "<sup>$</sup>" + totalDownPayment.toLocaleString();
  downPaymentValue.parentNode.appendChild(downPaymentValue);
  // Append total to DOM
  totalValue.innerHTML = "<sup>$</sup>" + totalPrice.toLocaleString();
  totalValue.parentNode.appendChild(totalValue);
  // Append per month to DOM
  perMonthValue.innerHTML = "<sup>$</sup>" + perMonth.toLocaleString();
  perMonthValue.parentNode.appendChild(perMonthValue);
}

Any idea? Thanks in advance.

perMonth is a string, not a number. replace perMonth.toLocaleString(); with (+perMonth).toLocaleString(); — dandavis
– dandavis, Commented Jan 27, 2020 at 21:41

Brandon · Accepted Answer · 2020-01-27 21:42:33Z

6

It is because your other numbers are being converted to string via toFixed. So toLocaleString does not do anything.

Do all of your math in numbers and convert to strings at the end.

const totalDownPayment = (productPrice * percentageSelected);
const totalPrice = (productPrice - totalDownPayment);
const perMonth = (totalPrice / monthSelected);

convert to text with options argument to specify number of decimals:

const totalDownPaymentStr = totalDownPayment.toLocaleString(navigator.language, { minimumFractionDigits: 2, maximumFractionDigits: 2 })
const totalPriceStr = totalPrice.toLocaleString(navigator.language, { minimumFractionDigits: 2, maximumFractionDigits: 2 })
// ...

See MDN documentation for more information about the options argument.

edited Jan 27, 2020 at 21:42

answered Jan 27, 2020 at 21:41

Brandon

39.3k8 gold badges86 silver badges89 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Scott Marcus Over a year ago

@dandavis There really not that new.

JD Fill Over a year ago

@brandon Thank you very much! Works great!

Collectives™ on Stack Overflow

Adding a comma to numbers larger than a thousand in JavaScript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related