數字的平均值輸入文本框

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'];）。確保您在將結果輸入到數據庫之前清理結果！