Question

我正在尝试运行一个函数，该函数会在表单结果中添加逗号，该表单将两个下拉框的值相乘。

我在p class="points"等html元素上运行的函数，但它不能处理id="results2"生成的输出

知道我做错了吗？

<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>

Answer 1

这是一个快速的脏方法：

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

应该补充一点，这是由Peter Mortensen提供的： How to print a number with commas as thousands separators in JavaScript

这是一个演示： https://jsfiddle.net/keinchy/dx7qg4nk/1/

-cheers

Answer 2

#multiply的事件处理程序从未实际调用numberWithCommas。取代

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

与

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

它应该有用。

Answer 3

您只是没有在结果上调用numberWithCommas()。这是您的代码，只有一个更改（我必须添加select的 oninput 引用的calculate函数。

$(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>

添加逗号到Javascript输出

3 个答案: