javascript - 如何从一系列文本区域(用户输入)中获取平均数？

Question

我正在开发一种表单，用户应在其中输入 12 个数字，每月一个，每个数字在一行列中。我需要得到下面的动态数字的平均值。最好的方法是使用“计算”​​按钮，用户可以单击并查看结果。我如何使用 JavaScript 来实现？

我在网上寻找了不同的选项，但没有找到适用于这个具体问题的选项。我附上行和文本区域的代码:

   @*<h2><strong>Criação de Postos de Trabalho</strong></h2>
                    <br />

                    <div class="row">
                        <div class="col-lg-2">
                            <div class="form-group">
                                <label for="comment">Janeiro</label>
                                <textarea class="form-control" rows="1" cols="1" id="janeiro"></textarea>
                            </div>
                        </div>
                        <div class="col-lg-2">
                            <div class="form-group">
                                <label for="comment">Fevereiro</label>
                                <textarea class="form-control" rows="1" cols="1" id="fevereiro"></textarea>
                            </div>
                        </div>
                        <div class="col-lg-2">
                            <div class="form-group">
                                <label for="comment">Março</label>
                                <textarea class="form-control" rows="1" cols="1" id="março"></textarea>
                            </div>
                        </div>
                        <div class="col-lg-2">
                            <div class="form-group">
                                <label for="comment">Abril</label>
                                <textarea class="form-control" rows="1" cols="1" id="abril"></textarea>
                            </div>
                        </div>
                        <div class="col-lg-2">
                            <div class="form-group">
                                <label for="comment">Maio</label>
                                <textarea class="form-control" rows="1" cols="1" id="maio"></textarea>
                            </div>
                        </div>
                        <div class="col-lg-2">
                            <div class="form-group">
                                <label for="comment">Junho</label>
                                <textarea class="form-control" rows="1" cols="1" id="junho"></textarea>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-lg-2">
                            <div class="form-group">
                                <label for="comment">Julho</label>
                                <textarea class="form-control" rows="1" cols="10" id="julho"></textarea>
                            </div>
                        </div>
                        <div class="col-lg-2">
                            <div class="form-group">
                                <label for="comment">Agosto</label>
                                <textarea class="form-control" rows="1" cols="10" id="agosto"></textarea>
                            </div>
                        </div>
                        <div class="col-lg-2">
                            <div class="form-group">
                                <label for="comment">Setembro</label>
                                <textarea class="form-control" rows="1" cols="10" id="setembro"></textarea>
                            </div>
                        </div>
                        <div class="col-lg-2">
                            <div class="form-group">
                                <label for="comment">Outubro</label>
                                <textarea class="form-control" rows="1" cols="10" id="outubro"></textarea>
                            </div>
                        </div>
                        <div class="col-lg-2">
                            <div class="form-group">
                                <label for="comment">Novembro</label>
                                <textarea class="form-control" rows="1" cols="10" id="novembro"></textarea>
                            </div>
                        </div>
                        <div class="col-lg-2">
                            <div class="form-group">
                                <label for="comment">Dezembro</label>
                                <textarea class="form-control" rows="1" cols="10" id="dezembro"></textarea>
                            </div>
                        </div>
                    </div>


                    <br />
                    <br />

                    Nº Médio de Postos de Trabalho dos 12 meses Precedentes:
                    <br />
                    <br />

                    <div class="row">

                        <div class="col-lg-4">
                            <div class="form-group">

                                <textarea class="form-control" rows="1" cols="1" id="medio"></textarea>





                            </div>
                        </div>
                    </div>
                </div>*@

例如，如果用户在每个月输入“1”，我希望他们在单击“计算”按钮时看到“1”。只需要获取 12 个输入字段的平均值。

Answer 1

希望这个例子能帮到你。 HTML 代码如下

<form>
        <input class="input-no" type="number" name="">
        <input class="input-no" type="number" name="">
        <input class="input-no" type="number" name="">
        <input class="input-no" type="number" name="">
        <input class="input-no" type="number" name="">
        <input class="input-no" type="number" name="">
        <input class="input-no" type="number" name="">
        <input class="input-no" type="number" name="">
        <input class="input-no" type="number" name="">
        <input class="input-no" type="number" name="">
        <input class="input-no" type="number" name="">
        <input class="input-no" type="number" name="">
    </form>
    <div>
        <button>Average</button>
        <input type="number" class="avg" name="">
    </div>

下面的jquery代码

$(document).ready(function(){
    var totAvg = 0;
    $('button').click(function(){
        for(var i=0;i<12;i++){
            totAvg = totAvg + parseInt($('form').children('input').eq(i).val(),10);
        }
        $('.avg').val(totAvg/12);
        totAvg = 0;
    });
});