Adding Comma To Javascript Output

Question

I'm trying to run a function that will add commas to the results of a form that multiplies the values of two drop down boxes.

The function I have works on an html element such as p class="points" but it is not working on the output generated by id="results2"

Any idea what I'm doing wrong?

<form name="myForm" id="myForm">
    <label>Select Amount</label>
    <select id="box1" type="select" oninput="calculate()" />
        <option value="choose" selected>Choose</option>
        <option value="15000">$15,000</option>
        <option value="20000">$20,000</option>
        <option value="25000">$25,000</option>
        <option value="30000">$30,000</option>
        <option value="35000">$35,000</option>
    </select>
    <label>Select Type</label>
    <select id="box2" type="select" oninput="calculate()" />
        <option value="x" selected>Choose</option>
        <option value=".21">1</option>
        <option value=".40">2</option>
    </select>
    <input class="button" type="submit" value="Submit" id="multiply">

    <p>
        <strong>here are the results:</strong> 
    </p>
    <h3>
        <strong>$<span id="result2"></span></strong> a week
    </h3>
</form>


<script>
   $(document).ready(function(){
       $('#multiply').click(function(event){

       event.preventDefault();
       var n1=$('#box1').val();
       var n2=$('#box2').val();
       var result=Math.round(n1*n2*25);

       $('#resultholder4').fadeIn(200);
       $('#number1').append(n1);
       $('#number2').append(n2);
       $('#result2').text(result); 

      });
    });
</script>

<script type="text/javascript">

    function numberWithCommas(x) {
        return x.toString().replace(/\B(?=(?:\d{3})+(?!\d))/g, ",");
    }

    $('.points').each(function() {
        var v_pound = $(this).html();
        v_pound = numberWithCommas(v_pound);

        $(this).html(v_pound)

    })

</script>

Try to reduce your code to a minimal example first, removing unnecessary parts. — lilezek, Sep 18 '17 at 20:15
can't see where you're adding a number with commas to span id result2 ? — Ruslan, Sep 18 '17 at 20:21
Your script to replace is running once when loaded, so it's not going to replace anything.. Did you mean to place this inside your click event..? — Keith, Sep 18 '17 at 20:21
Your `click` event handler for `#multiply` never calls `numberWithCommas`... — insert_name_here, Sep 18 '17 at 20:22
as @insert_name_here says : `$('#result2').text(numberWithCommas(result));` — Stephen P, Sep 18 '17 at 20:34
This is a bad question; formatting with commas is a very common problem with numerous documented solutions around the internet. EDIT: and if it's not about comma formatting, then as @lilezek noted, it needs to be clarified. — Greg Rozmarynowycz, Sep 18 '17 at 20:41
Possible duplicate of [Javascript Number Formatting With Commas](https://stackoverflow.com/questions/16902924/javascript-number-formatting-with-commas) — Greg Rozmarynowycz, Sep 18 '17 at 20:42

score 0 · Answer 1 · answered Sep 18 '17 at 20:26

Here is a quick dirty method:

function numberWithCommas(x) {
    x = x.toString();
    var pattern = /(-?\d+)(\d{3})/;
    while (pattern.test(x))
        x = x.replace(pattern, "$1,$2");
    return x;
}

should add that this was provided by Peter Mortensen: How to print a number with commas as thousands separators in JavaScript

here is a demo: https://jsfiddle.net/keinchy/dx7qg4nk/1/

-cheers

score 0 · Answer 2 · answered Sep 18 '17 at 20:38

0

Your event handler for #multiply never actually calls numberWithCommas. Replace

$('#result2').text(result);

with

$('#result2').text(numberWithCommas(result));

and it should work.

answered Sep 18 '17 at 20:38

insert_name_here

447
4
9

score 0 · Accepted Answer · edited Sep 19 '17 at 23:18

You are just not calling numberWithCommas() on your result. Here is your code with one change (and I had to add the calculate function that is referenced by the select's oninput).

$(document).ready(function() {
    $('#multiply').click(function(event) {

        event.preventDefault();
        var n1=$('#box1').val();
        var n2=$('#box2').val();
        var result=Math.round(n1*n2*25);

        $('#resultholder4').fadeIn(200);
        $('#number1').append(n1);
        $('#number2').append(n2);

        // added call to numberWithCommas, line had been:
      //$('#result2').text(result);
        // changed to:
        $('#result2').text(numberWithCommas(result)); //   <--------

    });
});



function numberWithCommas(x) {
    return x.toString().replace(/\B(?=(?:\d{3})+(?!\d))/g, ",");
}

$('.points').each(function() {
    var v_pound = $(this).html();
    v_pound = numberWithCommas(v_pound);

    $(this).html(v_pound)
});

function calculate() {
    // ?
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="myForm" id="myForm">
    <label>Select Amount</label>
    <select id="box1" type="select" oninput="calculate()" />
        <option value="choose" selected>Choose</option>
        <option value="15000">$15,000</option>
        <option value="20000">$20,000</option>
        <option value="25000">$25,000</option>
        <option value="30000">$30,000</option>
        <option value="35000">$35,000</option>
    </select>
    <label>Select Type</label>
    <select id="box2" type="select" oninput="calculate()" />
        <option value="x" selected>Choose</option>
        <option value=".21">1</option>
        <option value=".40">2</option>
    </select>
    <input class="button" type="submit" value="Submit" id="multiply">

    <p>
        <strong>here are the results:</strong> 
    </p>
    <h3>
        <strong>$<span id="result2"></span></strong> a week
    </h3>
</form>

Adding Comma To Javascript Output

3 Answers3