Decimal limit jQuery

Question

Anyone know how I can get the following to limit the decimals to 2 places? There's also a problem that it displays NaN when there are no values in the two fields (I'd rather it just show nothing). Can anyone help fix these problems?

HTML

<td class="grade">
    <input type="text" value="28" class="numerator" /> / <input type="text" value="30" class="denominator" />
    <div class="result"></div>
</td>

jQuery

function update($ele) {
    var n = Number($ele.find('.numerator')[0].value);
    var d = Number($ele.find('.denominator')[0].value);
    $ele.find('.result').text(n / d * 100);
}

$('.grade').each(function() {
    update($(this));
});

$('.grade input').on('keyup', function() {
    update($(this).closest('.grade'));
});

kalley · Accepted Answer · 2013-08-09T05:27:03.557

3

fiddle:

function update($ele) {
    var n = Number($ele.find('.numerator')[0].value);
    var d = Number($ele.find('.denominator')[0].value);
    /* this works but is slightly more verbose (and maybe a bit slower) */
    var val = (n / d * 100);
    $ele.find('.result').text(( isNaN(val) || ! isFinite(val) ) ? '' : val.toFixed(2));
    /* This might be faster, and also make everything a bit more succinct * /
    var val = d !== 0 ? n / d * 100 : NaN;
    $ele.find('.result').text(isNaN(val) ? '' : val.toFixed(2));
    /* */
}

edited Aug 09 '13 at 05:27

answered Aug 09 '13 at 05:13

kalley

18,072
2
39
36

In addition to my original request, is it possible to stop showing 'infinity'? When you type a number into the .numerator field and leave the .denominator blank it shows the word 'infinity' - I'd rather it just show nothing. – Jeremy Blazé Aug 09 '13 at 05:17
2

Updated to take care of `Infinity` as well – kalley Aug 09 '13 at 05:18
Answer is correct by I'd suggest checking that `d` is not zero before doing the division (jslint). – Nabil Kadimi Aug 09 '13 at 05:19
@NabilKadimi I suppose that could probably make it faster. I added that option as a comment in the answer. – kalley Aug 09 '13 at 05:27
1

@kalley and as you said, "it will also make everything a bit more succinct" – Nabil Kadimi Aug 09 '13 at 05:32

Decimal limit jQuery

1 Answers1