Question

我正在努力从JavaScript中获取控件的输入值，我认为它可能与我正在循环的控件集合有关。

我的页面由许多带小数的输入控件组成。我只对名为'txtinput'的控件感兴趣，我需要计算每个控件的值。但是，当我使用下面的代码执行此操作时，我似乎只是为每个元素提供了一个JSON外观字符串。

 function TallyPoints() {

    var eles = [];
    var inputs = document.getElementsByTagName("input");
    var total = 0; 
    for (var i = 0; i < inputs.length; i++) {
        if (inputs[i].name.indexOf('txtpoints') == 0) {
            total += document.getElementsByName(inputs[i].name)[0].value;
        }
    }

    alert('Total: ' + total.toString());

};

我最终得到的是一个如下所示的值：

Total: 0{"enabled":false,"emptyMessage":"","validationText":"333.33","valueAsString":"333.33","minValue":-70368744177664,"maxValue":70368744177664,"lastSetTextBoxValue":"333.33"}{"enabled":false,"emptyMessage":"","validationText":"5.66","valueAsString":"5.66","minValue":-70368744177664,"maxValue":70368744177664,"lastSetTextBoxValue":"5.66"}

有什么想法吗？

Answer 1

您可能需要parseFloat()，因此您的添加功能正常（fiddle）：

var inputs = document.querySelectorAll("input[name^=txtpoints]");
var total = [].reduce.call(inputs, function (p, c) {
    return p + (parseFloat(c.value) || 0);
}, 0);

_{另请参阅parseInt()，isNaN()和Array.prototype.reduce()}

Answer 2

试试这个：

function TallyPoints() {

    var inputs = document.getElementsByTagName("input");
    var total = 0; 
    for (var i = 0; i < inputs.length; i++) {
        if (inputs[i].name.indexOf('txtpoints') == 0) {
            var val = parseFloat(inputs[i].value);
            if (!isNaN(val)) {
                total += val;
            }
        }
    }

    alert('Total: ' + total);

};

将输入从字符串转换为数字需要

parseFloat，以便+执行添加而不是连接。由于您已经拥有getElementsByName中的元素，因此无需使用inputs[i]。没有必要使用total.toString();将数字连接到字符串会自动转换它。

if (!isNan(val))测试会跳过不包含数字的输入。

您还可以使用document.querySelectorAll('input[name^=txtpoints]')一步查找相关的input元素。

从元素列表中获取每个控件的值？

2 个答案: