使用 Javascript 从输入数组中查找平均值 - 计算不正确

Question

我正在尝试计算用户选择的 3 个值（每个从 1-10 编号）的平均值，然后将结果传递到文本输入（以显示为图表）。

每次更改其中一个值时应该更新新的平均值，但平均值根本无法正常工作。我认为循环不会在每次运行时都重置值 - 它会在每次运行时累加总和，但不确定如何修复它。

这是我的代码：

var sliders = $("#health1,#health2,#health3");

var elmt = [];

$(sliders).each(function () {
    elmt.push($(this).attr('value'));

    $("#health1,#health2,#health3").change(function () {
        var sum = 0;
        averageRisk();
    });
});

function averageRisk() {
    var sum = 0;
    for (var i = 0; i < elmt.length; i++) {
        sum += parseInt(elmt[i], 10);
    }

    var avg = sum / elmt.length;
    document.getElementById('healthLevel').value = +avg;

    elmt.push($(sliders).attr('value'));
    $('#healthLevel').val(avg).trigger('change');

    console.log("Sum: " + sum);
    console.log("Average: " + avg);
}

这是一个例子：

http://jsfiddle.net/pixelmix/783cfmnv/

Answer 1

不确定，但似乎还有很多额外的工作要做。主要问题是您正在构建初始值数组并且每次更改时都没有获取值。第一个 .each 获取了所有滑块值并将它们添加到 elmt 并在每次更改后继续将新值推送到，而不是每次都获取当前值。您是否希望随时间累积所有值？

Fiddle: http://jsfiddle.net/AtheistP3ace/783cfmnv/6/

$("#health1,#health2,#health3").on('change', function () {
    averageRisk();
});

function averageRisk() {
    var sum = 0;
    var elmt = $("#health1,#health2,#health3");
    for (var i = 0; i < elmt.length; i++) {
        sum += parseInt(elmt[i].value, 10); //don't forget to add the base
    }

    var avg = sum / elmt.length;
    document.getElementById('healthLevel').value = +avg;

    $('#healthLevel').val(avg).trigger('change');
    console.log("Sum: " + sum);
    console.log("Average: " + avg);
}

如前所述，如果您想在总和为 NaN 时忽略更新内容，您可以这样做：

function averageRisk() {
    var sum = 0;
    var elmt = $("#health1,#health2,#health3");
    for (var i = 0; i < elmt.length; i++) {
        sum += parseInt(elmt[i].value, 10); //don't forget to add the base
    }

    if (isNaN(sum)) {
        return false;
    }

    var avg = sum / elmt.length;
    document.getElementById('healthLevel').value = +avg;

    $('#healthLevel').val(avg).trigger('change');
    console.log("Sum: " + sum);
    console.log("Average: " + avg);
}

Answer 2

问题是您在页面加载时填充了 elmt 数组。

当用户更改值时，您不会刷新 elmt 数组。所以用于计算平均值的数组总是相同的，空的。

每次修改输入值时都必须恢复它们。

function averageRisk() {
    var sum = 0;

    // Re make the loop for getting all inputs values
    $(sliders).each(function() {
        var value = parseInt($(this).val(), 10);
        sum += value;
    });

    var avg = sum/$(sliders).length;

    $('#healthLevel').val(avg);
}

工作示例：http://jsfiddle.net/783cfmnv/7/

PS ：您可以使用 css class healthInput 到 select 您的输入。如果您以后添加其他字段，则不必将新的输入 ID 添加到 jQuery select 或

Answer 3

我做了这个工作，检查它。

http://jsfiddle.net/783cfmnv/10/

$("#health1,#health2,#health3").change(function() {
             var val1 = +slider1.val();
                var val2 = +slider2.val();
                var val3 = +slider3.val();
             var avg = (val1 + val2 + val3) /3;  
             $("#healthLevel").val(avg);                  
            });

使用 Javascript 从输入数组中查找平均值 - 计算不正确

Finding average from input array with Javascript - not calculating correctly

javascript

arrays

moving-average