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.