Question

嘿大家我正在尝试使用javascript进行非常简单的计算来查找运行总计。我似乎错过了一些东西。我确实看过SO并发现了一些非常相似的场景但是，我似乎无法与我自己的代码相关。

这是我用来计算运行总数的脚本。

    var total = 0;

    function GetTotal(txtBox) {
        total += parseInt(txtBox.value) || 0;
        $("#chkTotal").html(total);
    }

以下是我的观点中的一些代码：

 <div class="editor-field">
        @Html.TextBox("FirstDemo", String.Empty, new { id = "firstdemo", onchange =     "GetTotal(this)" })
        @Html.ValidationMessageFor(model => model.FirstDemo)
    </div>


<div>
        <h3>Total Checked</h3>
    </div>
    <div id="chkTotal"></div>

总计算完美，直到在文本框中更改了值，在这种情况下，在文本框中输入的内容将再次添加到运行总计中。

任何人都可以帮助我吗？

Answer 1

问题是total变量的全局范围：我想您在表单中有几个文本字段，您可以将它们设置为以同样的方式处理onchage事件。第一次输入内容时，会将值正确添加到total中，但是当您在任何文本字段中更改某些内容时，它会再次添加新值。同样，因为total具有全局范围。

你应该在函数内局部移动total并重新解析你感兴趣的输入元素中的所有值。

由于你使用的是jquery，你可以这样做：

function GetTotal(txtBox) {
    var total = 0;
    $('input:text').each(function(index, value) {
        total += parseInt($(value).val() || 0);
    });

    $("#chkTotal").html(total);
}

这是jsfiddle为您演示的。

Answer 2

最简单的解决方案，循环遍历所有表单元素并重做计算。

我在你的代码中看到了jQuery，因此它是一个基本的选择器，可以获取元素和每个循环。

function GetTotal(txtBox) {
    var total = 0;
    $(".calculationClass").each(
        function() {
            total += parseInt(this.value,10) || 0;
        }
    );
    $("#chkTotal").html(total);
}

javascript运行总添加不正确

2 个答案: