Formatting JS-generated number as currency

Design help Custom code
1

Hey everyone,

I’m working from a cloneable of a form calculator and need a little help with one piece of it. This is the last thing I need to figure out before knowing if I can use this approach or not on a real project.

Essentially, I manipulated the custom JS code in this project to calculate and display a few different numbers at the bottom of the screen. The issue is that the price (which is in millions) has no formatting with commas (it just looks like 4555000 instead of 4,555,000). I’ve explored a few different additional JS solutions to format this number once calculated, but it never seems to work right and clashes with the existing JS that generates the number in the first place. This is one of the options I tried to implement: Support for currency, commas, numeral formatting - #4 by PixelGeek

So, I’m wondering if anyone is able to help me make sense of what I need to do to get the price numbers formatted with commas every time the number is re-generated? Thank you for the help.

(Just for reference, only the first row of blocks with the title “Power” are set up currently to calculate numbers correctly).

Here is my site Read-Only: Webflow - Michael's Spectacular Site

Live site: https://michaels-spectacular-site-3ac072.webflow.io/

2

I think writing a function that will take your number element and reformat it with a regex could be a first step. And then you could call that function any time the number changes, so the formatting isn’t lost after a new calculation.

I’m not sure if that’s a similar approach to what you’ve already tried, but that would be my first guess. I would totally recommend using ChatGPT to help with this. It’s perfect for this sort of thing.

2 Likes
3

Thank you! Wow. I didn’t even think to use ChatGPT. Within minutes it showed me exactly which line of code I needed to replace to make this work. Incredible. Again, thank you!

1 Like
4

Heck yeah! Congrats. That’s a great feeling. :slight_smile: