Show commas and decimal places in returned result

Question

I've created a simple calculator that subtracts 20% off any number which is entered into the input field.

I'm trying to display commas and decimal places on the entered number and the returned number.

Here is a link to my fiddle.

            <div class="salary-container">
                <h3 class="u-h4 u-margin-none">I want to see the breakdown for a salary of</h3>
                <span class="salary-input"><span class="salary-pound">£</span> <input type="number" min="17500" class="quantity input-text" name="quantity"></span>
                <button id="SubmitBtn" class="button submitbtn" value="Submit">Calculate</button>

            </div>

            <div class="valueDisplayed">
                <div class="valueDisplayed__item new-salary-container"">
                    <span class="result yearly font-bold"></span>
                </div>

 $(document).on('click', '.submitbtn', function (e) {
        e.preventDefault();

        var inputtedSalary = $(".quantity").val(),
            num = parseFloat(inputtedSalary),
            val = num - (num * .20),
            yearValue = $(".yearly");


        if (inputtedSalary === '') {
            yearValue.text('please enter a value');
        }

        if (inputtedSalary <= 17499) {
            yearValue.text('');

        } else if (inputtedSalary >= 17500) {
            yearValue.text(val);
        }

    });

I'm new to JS so not really sure how to tackle this.

Any suggestions or advice would be great.

Thanks

https://stackoverflow.com/questions/2901102/how-to-print-a-number-with-commas-as-thousands-separators-in-javascript — epascarello, Apr 01 '20 at 15:47

Evert vd H. · Accepted Answer · 2020-04-01T15:54:35.647

If it's only for visual representation, you could use a simple string replace.

That can look something like this

...
} else if (inputtedSalary >= 17500) {
    yearValue.text(val.toString().replace('.', ','));
}
...

But I would advice to look into Number.toLocaleString(). That auto formats your currency to the correct format and can look something like this

val.toLocaleString('en-GB', { style: 'currency', currency: 'GBP' });

Or you could use Intl.NumberFormat as junvar suggested

Show commas and decimal places in returned result

1 Answers1