数字的平均值输入文本框

Question

有人可以帮助我计算用户在文本框中输入的数字的平均值。用户可以添加更多的文本框来输入新的数字，并在新的文本框中显示平均值。例如，用户在3个文本框中自动输入67,87,45，平均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

您可以使用以下，根据您的需要：

绑定功能重新计算数量的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'];）。确保您在将结果输入到数据库之前清理结果！