если результат равен NaN или 0, тогда сделать результат 0 w / jQuery

Question

С этим кодом есть возможность, что пользователь введет либо 0, либо ничего вообще в поля числовой формы. Есть ли «поймать все», так что если пользователь делает это, NaN или полученный 0,0000% просто заменяется на 0? Я думаю, что для этого нужны две логики (?) Одна для замены NaN и одна для изменения результата .appendTo так, чтобы он показывал только 0, а не 0.00000%

вот JSFiddle - http://jsfiddle.net/sturobson/xTEKm/39/

и вот 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();
});

}); 

});

есть идеи?

Answer 1

NaN - это "ложь", и поэтому каждый раз, когда у вас есть переменная с номером в ней, и вы хотите заменить 0 на NaN, вы можете использовать ||:

foo = foo || 0;

Это из-за необычайно мощного || оператора JavaScript . Так что просто примените это к любым значениям в вашем коде, которые вы хотели обработать таким образом. Обычно это можно сделать только в конце, потому что любое числовое вычисление, включающее NaN, приводит к NaN, поэтому оно хорошо распространяется в вычислениях.

С точки зрения отображения 0 вместо 0.00000%, вы совершенно правы, что вам просто нужно добавить немного логики, чтобы сделать это. Я не совсем уверен, где в вашем коде вы хотели это сделать, но логика не сложная, например используя if:

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

... или встроенный троичный оператор:

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

Answer 2

Конвертировать один раз в получателе:

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

Также смотрите ваш обновленный пример .

=== ОБНОВЛЕНИЕ ===

С toFixed (x) вы получите ровно x десятичных знаков. Если вы хотите получить максимум x десятичных знаков, вы можете использовать следующую функцию:

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

Также см. Ваш обновленный пример .

=== ОБНОВЛЕНИЕ ===

Следующая проблема состоит в том, что знаменатель дроби должен быть ненулевым значением. Вы можете добавить функцию деления, которая возвращает ноль вместо NaN, если знаменатель равен нулю:

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

Также смотрите ваш обновленный пример .

=== ОБНОВЛЕНИЕ ===

Если вы хотите, чтобы код немного умнее, вы можете объединить его с T.J. Краудер ответ; исходный код может быть:

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();
        });

    });

});

Также смотрите ваш обновленный пример .