我正在开发一种表单，用户应该输入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个字段的平均值即可。
答案 0 :(得分：0)
我希望本示例对您有所帮助。 下面的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;
});
});
答案 1 :(得分：0)
这是您的答案：
首先，您不需要数字输入的文本，选择数字类型的输入标签。 下一步：选择所有文本区域并在此“集合”上循环 然后您检查id输入的是一个数字并将其添加到一个count变量 最后，将结果除以12，然后将其放入媒体textearea中。
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>