在文本框中输入的平均数字

时间:2015-06-09 16:56:32

标签: javascript

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

我承认你的代码更简单,更专业,但我需要时间来理解它们并将它们应用到我的应用程序中。这就是为什么我想要求你添加适用于我发布的代码的平均函数,我会更容易解决我的问题,同时我专注于你的代码来学习和理解它们。总审计结果有效,我想念审计平均值。感谢

2 个答案:

答案 0 :(得分:0)

根据您的需要,您可以使用以下内容:

绑定函数以重新计算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/

答案 1 :(得分:0)

&#13;
&#13;
$(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);
    });
});
&#13;
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;
}
&#13;
<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>
&#13;
&#13;
&#13;

您可以添加和删除输入,您可以编辑要包含的十进制值的数量(如果数字不是整数,请参阅jquery脚本中的注释),您可以选项卡添加另一个输入字段,如果你想要你可以添加一个默认值。

我还没有清理代码,如果我这样做,我会相应地编辑我的帖子。

为了获取数据库的值(因为你对另一个答案的评论显示你的意图),你需要给输入一个结果类(在我上面的脚本中)一个名字(比如{{ 1}})以及通过PHP脚本访问该变量(即使用POST方法:name='result')。确保在将结果输入数据库之前清理结果!