if result is NaN or 0 then make result 0 w/ jQuery

Question

With this code there's the possibility that the user would enter either a 0 or nothing at all in the 'numeric' form fields. Is there a 'catch all' so that if the user does this the NaN or resulting 0.0000% is just replaced with 0? I think this needs two logics(?) one for the NaN replacement and one to change the .appendTo result so that it only shows 0 rather than 0.00000%

here's a JSFiddle - http://jsfiddle.net/sturobson/xTEKm/39/

and here's the jquery -

$(document).ready(function() {

$(function(){
$("#result").submit(function(e) {
    e.preventDefault();

    var ele = $("#element").val(),
        target = $("#target").val(),
        context = $("#context").val(),
        border = $("#border").val(),
        margin = $("#margin").val(),
        padding = $("#padding").val();

    console.log(ele, target, context, border, margin, padding);

    var DoubleMargin = parseInt(margin, 10) * 2;
    var DoublePadding = parseInt(padding, 10) * 2;
    var DoubleBorder = parseInt(border, 10) * 2;


    var ActualTarget = parseInt(target, 10) - parseInt(DoubleBorder, 10) - parseInt(DoubleMargin, 10) - parseInt(DoublePadding, 10) * 1;
    var result3 = parseInt(target, 10) - parseInt(DoubleMargin, 10) * 1;
    var MarginResult = ((parseInt(margin, 10) / parseInt(target, 10)) * 100).toFixed(5);
    var PaddingResult = ((parseInt(padding, 10) / parseInt(target, 10)) * 100).toFixed(5);
    var OriginalResult = ((parseInt(ActualTarget, 10) / parseInt(context, 10)) * 100).toFixed(5);


    var BorderResult = parseInt(target, 10) - parseInt(border, 10) * 1;


    //$(".result").append(ele + " " + result + "%");
    $("<p></p>", {
        html: ele + " {<br><span>width: " + OriginalResult + "%;" + " /* " + ActualTarget + " (originally " + target + ") / " + context + " */ " + "<br>border: " + border + "px; " + "<br>margin: " + MarginResult + "%; " + "<br>padding: " + PaddingResult+ "%;" + "<br> </span>}"
    }).hide().appendTo("#code-results").fadeIn();
});

}); 

});

any ideas?​

Answer 1

Convert once at the getter:

var ele = $("#element").val(),
    target = (isNaN(target = parseInt($("#target").val(), 10)) ? 0 : target),
    context = (isNaN(context = parseInt($("#context").val(), 10)) ? 0 : context),
    border = (isNaN(border = parseInt($("#border").val(), 10)) ? 0 : border),
    margin = (isNaN(margin = parseInt($("#margin").val(), 10)) ? 0 : margin),
    padding = (isNaN(padding = parseInt($("#padding").val(), 10)) ? 0 : padding);

Also see your updated example.

=== UPDATE ===

With toFixed(x) you get exactly x decimals. If you want to get up to max x decimals, you can use following function instead:

function round(fValue, iDecimals) {
    var iPow = Math.pow(10, iDecimals);
    return Math.round(fValue * iPow) / iPow;
}

Also see your updated example.

=== UPDATE ===

The next problem is, that a denominator of a fraction has to be a non-zero value. You can add a division function which returns zero instead of NaN, if the denominator is zero:

function div(fNumerator, fDenominator) {
    return (fDenominator == 0 ? 0 : fNumerator / fDenominator);
}

Also see your updated example.

=== UPDATE ===

If you want the code a little smaler, you can combine it with T.J. Crowder answer; the source code could be:

function round(fValue, iDecimals) {
    var iPow = Math.pow(10, iDecimals);
    return Math.round(fValue * iPow) / iPow;
}

function div(fNumerator, fDenominator) {
    return (fDenominator == 0 ? 0 : fNumerator / fDenominator);
}

$(document).ready(function() {

    $(function(){
        $("#result").submit(function(e) {
            e.preventDefault();

            var ele = $("#element").val(),
                target = parseInt($("#target").val(), 10) || 0,
                context = parseInt($("#context").val(), 10) || 0,
                border = parseInt($("#border").val(), 10) || 0,
                margin = parseInt($("#margin").val(), 10) || 0,
                padding = parseInt($("#padding").val(), 10) || 0;

            console.log(ele, target, context, border, margin, padding);

            var DoubleMargin = margin * 2;
            var DoublePadding = padding * 2;
            var DoubleBorder = border * 2;


            var ActualTarget = target - DoubleBorder - DoubleMargin - DoublePadding * 1;
            var result3 = target - DoubleMargin * 1;
            var MarginResult = round(div(margin, target) * 100, 5);
            var PaddingResult = round(div(padding, target) * 100, 5);
            var OriginalResult = round(div(ActualTarget, context) * 100, 5);


            var BorderResult = target - border * 1;


            //$(".result").append(ele + " " + result + "%");
            $("<p></p>", {
                html: ele + " {<br><span>width: " + OriginalResult + "%;" + " /* " + ActualTarget + " (originally " + target + ") / " + context + " */ " + "<br>border: " + border + "px; " + "<br>margin: " + MarginResult + "%; " + "<br>padding: " + PaddingResult+ "%;" + "<br> </span>}"
            }).hide().appendTo("#code-results").fadeIn();
        });

    });

});

Also see your updated example.

Answer 2

NaN is "falsey", and so any time you have a variable with a number in it and you want to substitute 0 for NaN, you can use ||:

foo = foo || 0;

This is because of JavaScript's curiously-powerful || operator. So just apply that to whichever values it was in your code that you wanted handled that way. You can usually do it just at the end, because any numeric calculation involving NaN results in NaN, so it propagates well through calculations.

In terms of displaying 0 rather than 0.00000%, you're quite right that you just need to add a bit of logic to do that. I wasn't quite sure where in your code you wanted to do it, but the logic isn't complicated, e.g. using an if:

if (variable === 0) {
    // Just show 0
}
else {
    // Show the full thing
}

...or inline with a ternary operator:

"text " + (variable === 0 ? "0" : (variable + "%")) + " more text"