Question

我有4个字段供我进行计算，它们应该加起来并给我总和。但是，当字段为空时，字段存在一些问题。

代码和脚本如下：

<tr id="row">
  <td>No. of Dependant(s)</td>
  <td><input type="text" id="Dep-main" value="0"></td>
  <td><input type="text" id="Dep-joint1" value="0"></td>
  <td><input type="text" id="Dep-joint2" value="0"></td>
  <td><input type="text" id="Dep-joint3" value="0"></td>
  <td><input type="text" id="Total-dep" readonly></td>
</tr>

剧本：

   <script>

                var main = document.getElementById("Dep-main");
                var joint1 = document.getElementById("Dep-joint1");
                var joint2 = document.getElementById("Dep-joint2");
                var joint3 = document.getElementById("Dep-joint3");
                var total = document.getElementById("Total-dep");
                1
                var inputs = Array.prototype.slice.call(document.querySelectorAll("td > input"));

                inputs.forEach(function (input) {

                    input.addEventListener("blur", function () {
                        // Always supply the second argument to parseInt() (the radix) so you
                        // dont' get non-base 10 answers.

                        if (main.value.length === 0) {

                            total.value = parseFloat(joint1.value) + parseFloat(joint2.value) + parseFloat(joint3.value);
                        } else if (joint1.value.length === 0) {

                            total.value = parseFloat(main.value) + parseFloat(joint2.value) + parseFloat(joint3.value);

                        } else if (joint2.value.length === 0) {

                            total.value = parseFloat(main.value) + parseFloat(joint1.value) + parseFloat(joint3.value);

                        } else if (joint3.value.length === 0) {

                            total.value = parseFloat(main.value) + parseFloat(joint1.value) + parseFloat(joint2.value);

                        }else{

                        total.value = parseFloat(main.value) + parseFloat(joint1.value) + parseFloat(joint2.value) + parseFloat(joint3.value);

                    }



                    });

                });
</script>

但是，如果有2个或更多字段为空，则“总计”字段将显示为NaN。有什么方法可以让我把这个字段保持为空并获得总数吗？

Answer 1

我最初的想法存在缺陷，因为如果某个字段随后被清除了值，它就不会更新最终值。使用对象来维护已收到blur事件的任何元素的值，然后执行值的总和计算似乎正常。

var total = {};
/* returns numeric value of field or zero if empty etc */
function fieldvalue(id){
    var field=document.getElementById( id );
    return field.value!='' && field.value.length > 0 && !isNaN( parseFloat( field.value ) ) ? parseFloat( field.value ) : 0;
}

var col=document.querySelectorAll('tr#row > td > input:not([readonly])');
if( col ){
    for( var n in col )if( col[ n ].nodeType==1 ){
        col[n].addEventListener('blur',function(event){
            total[ this.id ]=fieldvalue( this.id );
            document.getElementById('Total-dep').value=Object.values(total).reduce(function(a,b){return a+b;});
        }.bind( col[n] ),false);
    }
}

或更类似于使用Array.prototype.slice

的原始代码

/*
    The aim here is to select all input elements that are not marked
    as "readonly" as it is these that will be used for the calculations
    whilst the "readonly" field is updated programmatically only.
*/
var col=document.querySelectorAll('tr#row > td > input:not([readonly])');

/*
     Convert array-like object into a true array in order that we can use
     Array.forEach() method which does not work for all browsers when dealing
     with HTMLCollections - such as a nodelist
*/
var inputs = Array.prototype.slice.call( col );
inputs.forEach(function(e){
    /*
        Assign the `onblur` event handler to each of the input elements
        - the callback to the event handler will update the `total` object
        which is then later processed to calculate the sum of values stored.
    */
    e.addEventListener('blur',function(event){
        /*
            Update the total object with field value
        */
        total[ this.id ]=fieldvalue( this.id );
        /*
            Update the "readonly" field with calculated sum of values
        */
        document.getElementById('Total-dep').value=Object.values( total ).reduce(function(a,b){return a+b;});
    }.bind( e ),false);
});

也许值得注意的是使用Object.values(obj) - 并非所有浏览器都支持它（例如IE，Opera和Safari），但有polyfills可用here和{{ 3}}

而且，我刚刚写了这篇文章 - 没有严格测试btw

if( typeof( Object.values )!='function' ){
    Object.prototype.values=function(obj){
        var tmp=[];
        var keys=Array.prototype.slice.call( Object.keys( obj ) );
        keys.forEach(function( item ){
            tmp.push( obj[item] )
        });
        return tmp;
    };
}

Answer 2

您正在检查 if else 语句中的空值，说明您收到错误的原因，因此您需要单独检查

就这样做

var total=0;

if (main.value.length != 0) {
    total = total+parseFloat(main.value);
}
if (joint1.value.length != 0) {
    total = total+parseFloat(joint1.value);
}
if (joint2.value.length != 0) {
    total = total+parseFloat(joint2.value);
}
if (joint3.value.length != 0) {
    total = total+parseFloat(joint3.value);
}
total.value = total

它将帮助您解决我们的问题。

Answer 3

我会循环播放字段，如果包含某些内容则添加它。

total.value = 0;
if (main.value.length === 0) {
    total.value += parseFloat(main.value);
}
if (join1.value.length === 0) {
    total.value += parseFloat(join1.value);
}
if (join2.value.length === 0) {
    total.value += parseFloat(join2.value);
}
if (join3.value.length === 0) {
    total.value += parseFloat(join3.value);
}

Answer 4

我没有得到你真正追求的东西。但是，我相信使用此类检查会引导您找到解决方案：

var x = $("#someFloatExpectedInput").val();
var y = $("#someIntExpectedInput").val();

if (!isNaN(parseFloat(x))) {
    //
}

if (!isNaN(parseInt(y))) {
    //
}

用很多字段计算

4 个答案: