Как я могу получить среднее число из диапазона текстовых областей (пользовательский ввод)?

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

Вот ваш ответ:

Прежде всего вам не нужна textearea для ввода чисел, выберите тег ввода типа number.Далее: вы выбираете все текстовые области и цикл в этой «коллекции», затем вы проверяете id, что вход является числом, и добавляете его в переменную count, в конце вы делите результат на 12 и помещаете его в media 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>

Answer 2

Я надеюсь, что этот пример поможет вам. 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;
    });
});