Question

如何创建以下html模板？

我有6个文本框。文本框1-5用于输入，6用于输出。在文本框6中，我想要其他5个文本框的平均值而不按任何按钮以便将结果发送到文本框6.输入5个文本框可以是可选的（文本框值可以是空白或数字）。

Answer 1

我想这就是你要找的......

的index.html

<!DOCTYPE html>
<html>
<head>
    <title>Average Calculation</title>
</head>

<body>
    <input class="my_val" type="number" size="5" name="input1">
    <input class="my_val" type="number" size="5" name="input2">
    <input class="my_val" type="number" size="5" name="input3">
    <input class="my_val" type="number" size="5" name="input4">
    <input class="my_val" type="number" size="5" name="input5">
    <input class="output" type="number" size="5" name="input6" readonly>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="app.js"></script>
</body>

</html>

app.js

$('.my_val').keyup(function () {
    var total = 0,
        count_field = 0,
        average;

    $('.my_val').each(function () {
        var val = parseInt($(this).val(), 10);
        if (!isNaN(val)) {
            count_field += 1;
            total += val;
        }
    });
    average = total / count_field;
    $('.output').val(average);
});

这是工作小提琴JSFiddle

希望我帮助过你。

html模板中其他文本框的5个文本框的平均值

1 个答案: