среднее число чисел введите в текстовое поле

Question

Может кто-нибудь помочь мне рассчитать среднее число чисел, введенное пользователем в текстовом поле. пользователь может добавить больше текстового поля для ввода нового номера и после отображения среднего значения в новом текстовом поле. Например, пользователь вводит 67, 87, 45 в 3 текстовом поле автоматически, среднее 66,33 появляется в новом текстовом поле. Если он хочет, он может добавить новый texbox, чтобы продолжать вводить цифры. Спасибо большое

я отправляю мои коды работают правильно я случаться вычислить только сумма texbox я скучаю средний Теперь

<script> 

Function send() { 
val1 = parseFloat(document.form1.valeur_2.value); 
if (isNaN(val1) == true) val1=0; 
val2 = parseFloat(document.form1.valeur_3.value); 
if (isNaN(val2) == true) val2=0; 
val3 = parseFloat(document.form1.valeur_4.value); 
if (isNaN(val3) == true) val3=0; 
val4 = parseFloat(document.form1.valeur_5.value); 
if (isNaN(val4) == true) val4=0; 


function switchInfoPerso() 
{ 
divInfo = document.getElementById('divacacher'); 
if (divInfo.style.display == 'none') 
divInfo.style.display = 'block'; 
else 
divInfo.style.display = 'none'; 
} 
function switchInfoPerso1() 
{ 
divInfo = document.getElementById('divacacher1'); 
if (divInfo.style.display == 'none') 
divInfo.style.display = 'block'; 
else 
divInfo.style.display = 'none'; 
} 

function switchInfoPerso2() 
{ 
divInfo = document.getElementById('divacacher2'); 
if (divInfo.style.display == 'none') 
divInfo.style.display = 'block'; 
else 
divInfo.style.display = 'none'; 
} 

function switchInfoPerso3() 
{ 
divInfo = document.getElementById('divacacher3'); 
if (divInfo.style.display == 'none') 
divInfo.style.display = 'block'; 
else 
divInfo.style.display = 'none'; 
} 
</script> 
<table> 
<tr><td> 
<label>Audit Result</label> 
</td> 
<td> </br> 
<label>#1</label> <input type="text" name="valeur_2" id="valeur_2"  
onchange="send()" size="10" /> <b>%</b> </br></br> 
<a href="javascript: switchInfoPerso();" style="color:black">Show #2</a> 
<div id="divacacher" style="display: none;"> 
<label>#2</label> <input type="text" name="valeur_3" id="valeur_3"  
onchange="send()" size="10"/> <b>%</b> </br></br> 

<a href="javascript: switchInfoPerso1();" style="color:black">Show #3</a> 
<div id="divacacher1" style="display: none;"> 
<label>#3</label> <input type="text" name="valeur_4" id="valeur_4" 
onchange="send()" size="10"/><b>%</b> </br></br> 

<a href="javascript: switchInfoPerso2();" style="color:black">Show #4</a> 
<div id="divacacher2" style="display: none;"> 
<label>#4</label> <input type="text" name="valeur_5" id="valeur_5" 
onchange="send()" size="10"/><b>%</b> </br></br> 

<a href="javascript: switchInfoPerso3();" style="color:black">Show #5</a> 
<div id="divacacher3" style="display: none;"> 
<label>#5</label> <input type="text" name="valeur_6" id="valeur_6" 
onchange="send()" size="10"/><b>%</b> </br></br></tr> 
<tr><td> 
<label>Total audit result</label> 
</td> 
<td> 
<input type="text" name="total" id="total" /></td></tr> 
<tr><td> 
<label>Audit average</label> 
</td> 
<td> 
<input type="text" name="average" id="average" /></td></tr> 
</table> 

Признаюсь, что ваши коды проще и более профессионально, что мое, однако Мне нужно время, чтобы понять их и применить их к моему приложению. Вот почему я хотел бы попросить вас добавить среднюю функцию, применимую к моим кодам, и мне будет легче решить мою проблему, тем временем я сосредоточусь на ваших кодах, чтобы узнать и понять их. Общий результат аудита работает, я скучаю средний показатель аудита. спасибо

Answer 1

Вы можете использовать следующие, в зависимости от ваших потребностей:

BIND функции пересчитать число в document, добавив селектор для текстовых входов, которые вы хотите вычислить. Если вы напрямую привяжете функцию к классу ввода, динамически созданные входы не будут выполнять эту функцию.

$(document).on("keyup", "input.calcme", function() { 
    recalc(); 
}); 

высчитывает значения путем деления суммы на число членов:

function recalc() { 
    var sum = 0; 
    var nums = 0; 
    $(".calcme").each(function() { 
     nums++; 
     sum += 1 * $(this).val(); // multiply by one to enforce numeric interpretation 
    }); 
    $("#result").val(sum/nums); 
} 

Добавление нового входа на кнопку мыши:

function addmore() { 
    $("#inputs").append('<input type="text" class="calcme" value="0" />'); 
    recalc(); 
} 

HTML:

<div id="inputs"> 
    <input type="text" class="calcme" /> 
</div> 
<button id="addmode" onclick="addmore()">+</button> 
<input readonly="readonly" id="result" /> 

Демо-версия: https://jsfiddle.net/svArtist/ovhb80jg/

Answer 2

$(function() { 
 
    addInput(false); 
 

 
    $("#av").on("click", ".addNumber", function() { 
 
     addInput(true); 
 
    }); 
 

 
    $("#av .inputs").on("keydown", "input", function (e) { 
 
     var code = e.keyCode || e.which; 
 
     if (code == '9' && !(e.shiftKey) && $(this).parent("p").next("p").length === 0) addInput(true); 
 
    }); 
 

 
    $("#av").on("click", ".removeInput", function() { 
 
     $(this).parent("p").remove(); 
 
    }); 
 

 
    function addInput(removable) { 
 
     var input = ""; 
 
     if (!removable) { 
 
      input = "<p><input type='text' maxlength='30' placeholder='Number'/></p>"; 
 
     } else { 
 
      input = "<p><input type='text' maxlength='30' placeholder='Number'/><input type='button' class='removeInput' value='Remove' tabindex='-1'/></p>"; 
 
     } 
 
     $(input).appendTo("#av .inputs"); 
 
    } 
 

 
    $("#av .inputs").on("keyup", "input", function() { 
 
     var length = $("#av .inputs").children("p").length; 
 
     var total = 0; 
 
     for (var i = 0; i < length; i++) { 
 
      var val = $("#av .inputs").find("p:eq(" + i + ")").find("input").val(); 
 
      $("#av .inputs").find("p:eq(" + i + ")").find("input[type='text']").val(val.replace(/[^\d\.]/g, '')); 
 
      val = $("#av .inputs").find("p:eq(" + i + ")").find("input[type='text']").val(); 
 
      total += parseInt(val, 10); 
 
     } 
 
     var result = total/length; 
 
     if (result % 1 !== 0) result = result.toFixed(3); //Edit this if you want decimal places 
 
     $("#av .result").val(result); 
 
    }); 
 
});

input[type="text"], input[type="number"] { 
 
    margin: 5px; 
 
    padding: 5px; 
 
    border: 1px solid black; 
 
    border-radius:4px; 
 
    -moz-border-radius:4px; 
 
    -web-kit-border-radius:4px; 
 
    -khtml-border-radius:4px; 
 
} 
 
input[type="text"]:focus, input[type="number"]:focus { 
 
    border: 1px solid #1CCDE8; 
 
    outline: none; 
 
} 
 
input[type="submit"]:not(.removeInput), input[type="button"]:not(.removeInput) { 
 
    display: block; 
 
    cursor: pointer; 
 
    margin: 5px; 
 
    padding: 5px; 
 
    border: 1px solid transparent; 
 
    border-radius:4px; 
 
    -moz-border-radius:4px; 
 
    -web-kit-border-radius:4px; 
 
    -khtml-border-radius:4px; 
 
    outline: none; 
 
} 
 
input[type="submit"].removeInput, input[type="button"].removeInput { 
 
    cursor: pointer; 
 
    border: none; 
 
    background: none; 
 
    outline: none; 
 
    color: #999; 
 
} 
 
input[type="submit"]:not(.removeInput):hover, input[type="button"]:not(.removeInput):hover { 
 
    background-color: #1CCDE8; 
 
    color: white; 
 
} 
 
form p { 
 
    margin: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<form id="av"> 
 
    <input class="addNumber" type="button" value="Add Number" /> 
 
    <div class="inputs"></div> 
 
    <input class="result" type="text" disabled /> 
 
</form>

Вы можете добавлять и удалять материалы, вы можете изменить количество десятичных значений, которые вы хотите включить (если число не является целым числом, см комментарии в подлиннике Jquery), вы можете добавить вкладку, чтобы добавить другое поле ввода, если хотите, вы можете добавить значение по умолчанию.

Я еще не очистил код, когда/если я это сделаю, я отредактирую свое сообщение соответственно.

Чтобы получить значение в базе данных (так как ваш комментарий к другому ответу показывает ваше намерение быть), вам нужно предоставить ввод с результатом (в моем сценарии выше) имени (скажем name='result') и доступ к этой переменной через ваш PHP-скрипт (т. е. использование метода POST: $_POST['result'];). Убедитесь, что вы дезинфицируете результат, прежде чем вводить его в базу данных!