如何从一系列文本区域（用户输入）中获取平均数字？答案

【问题标题】：How can i get the average number from a range of text areas (user input)?如何从一系列文本区域（用户输入）中获取平均数字？
【发布时间】：2019-05-22 10:54:01
【问题描述】：

我正在开发一个表单，用户应在其中输入 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 个字段取平均值即可。

【问题讨论】：

那么问题出在哪里？如何获取输入到字段中的值？如何将它们相加并计算平均值？
你的尝试是什么？

标签： javascript html css model-view-controller

【解决方案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;
    });
});

【讨论】：

【解决方案2】：

这是你的答案：

首先你不需要 textearea 来输入数字，选择数字类型的输入标签。下一步：您选择所有文本区域并在此“集合”上循环然后您检查 id 输入是一个数字并将其添加到计数变量最后将结果除以 12 并将其放入媒体文本区域中。

  document.getElementById("calculate").addEventListener("click", function(){
	var inputs = document.getElementsByTagName("textarea"); 
	var result = 0;
	if(inputs){
		for (var i = 0; i < inputs.length; i++) { 
			if(inputs[i].getAttribute("id") != "medio"){
				var entry = parseInt(inputs[i].value);
				if(!isNaN(entry)){
					result+= entry;
				}
			}
		}

	}
	 document.getElementById("medio").value = (result / 12).toFixed(2);; 
});

<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 />
					<button id="calculate">Calculate</button>
					                    <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>

【讨论】：