计算平均值并在两个文本框中显示不同的结果

时间：2017-04-04 21:32:52

标签： javascript html

在计算平均值时，我必须在两个不同的文本框中显示不同的结果。但结果只在一个文本框中相同...如何在两个不同的文本框中显示平均值。这是我的代码< / p> 

function calcAvg() {
    //Get all elements with 'class="select"'
    var selects = document.getElementsByClassName("select");
    //Initialize vars
    var avg = 0;
    var count = 0;
    //Calculate average
    for (var i = 0; i < selects.length; i++) {
        if (selects[i].value != "N/A") {
            count++;
            avg += Number(selects[i].value);
            //Alert for debugging purposes
            //alert(selects[i].value+" "+avg);
        }
    }
    avg = avg / count;
    //Output average
    document.getElementById("bpover").value = avg;
}
<select class="select" name="Value[]" onChange="calcAvg();" style="width:100px">
    <option name="N/A">N/A</option>
    <option name="1">1</option>
    <option name="2">2</option>
    <option name="3">3</option>
</select>&nbsp;&nbsp;&nbsp;
<select class="select" name="Value[]" onChange="calcAvg();" style="width:100px">
    <option name="N/A">N/A</option>
    <option name="1">1</option>
    <option name="2">2</option>
    <option name="3">3</option>
</select>&nbsp;&nbsp;&nbsp;
<select class="select" name="Value[]" onChange="calcAvg();" style="width:100px">
    <option name="N/A">N/A</option>
    <option name="1">1</option>
    <option name="2">2</option>
    <option name="3">3</option>
</select>&nbsp;&nbsp;&nbsp;
<select class="select" name="Value[]" onChange="calcAvg();" style="width:100px">
    <option name="N/A">N/A</option>
    <option name="1">1</option>
    <option name="2">2</option>
    <option name="3">3</option>
</select>&nbsp;&nbsp;&nbsp;
<select class="select" name="Value[]" onChange="calcAvg();" style="width:100px">
    <option name="N/A">N/A</option>
    <option name="1">1</option>
    <option name="2">2</option>
    <option name="3">3</option>
</select>&nbsp;&nbsp;&nbsp;
<input type="text" name="Average" id="bpover" readonly>
<hr>
<select class="select" name="Value[]" onChange="calcAvg();" style="width:100px">
    <option name="N/A">N/A</option>
    <option name="1">1</option>
    <option name="2">2</option>
    <option name="3">3</option>
</select>&nbsp;&nbsp;&nbsp;
<select class="select" name="Value[]" onChange="calcAvg();" style="width:100px">
    <option name="N/A">N/A</option>
    <option name="1">1</option>
    <option name="2">2</option>
    <option name="3">3</option>
</select>&nbsp;&nbsp;&nbsp;
<select class="select" name="Value[]" onChange="calcAvg();" style="width:100px">
    <option name="N/A">N/A</option>
    <option name="1">1</option>
    <option name="2">2</option>
    <option name="3">3</option>
</select>&nbsp;&nbsp;&nbsp;
<select class="select" name="Value[]" onChange="calcAvg();" style="width:100px">
    <option name="N/A">N/A</option>
    <option name="1">1</option>
    <option name="2">2</option>
    <option name="3">3</option>
</select>&nbsp;&nbsp;&nbsp;
<select class="select" name="Value[]" onChange="calcAvg();" style="width:100px">
    <option name="N/A">N/A</option>
    <option name="1">1</option>
    <option name="2">2</option>
    <option name="3">3</option>
</select>&nbsp;&nbsp;&nbsp;
<input type="text" name="Average" id="bpover" readonly>

5 个答案:

答案 0 :(得分：1)

  

在计算平均值时，我必须在两个中显示不同的结果   不同的文本框。但结果只在一个文本框中相同

它不起作用，因为您有两个具有相同值的id属性。那是 NOT 有效的HTML。在这种情况下，最好使用class属性，因为这样可以定位多个元素。

将id更改为class属性。

第1步 - 更改第一个input元素：

<input type="text" name="Average" id="bpover" readonly>

到此： 

<input type="text" name="Average" class="bpover" readonly>

第2步 - 更改第二个input元素：

<input type="text" name="Average" id="bpover" readonly>

到此： 

<input type="text" name="Average" class="bpover" readonly>

然后在你的javascript中：

改变这一点： 

document.getElementById("bpover").value = avg;

到此： 

var array = document.getElementsByClassName("bpover");
array[0].value = avg;
array[1].value = avg;

进一步阅读：

答案 1 :(得分：0)

问题：两个输入都有相同的ID。

解决方案：尝试此代码

只是传递了id值，以确定您要在此处指向哪个输入。

    <!DOCTYPE html>
    <html>
    <head>
    <title>Page Title</title>
    </head>
    <script type="text/javascript">
    function calcAvg(Input_choice) {
        //Get all elements with 'class="select"'
        var selects = document.getElementsByClassName("select");
        //Initialize vars
        var avg = 0;
        var count = 0;
        //Calculate average
        for (var i = 0; i < selects.length; i++) {
            if (selects[i].value != "N/A") {
                count++;
                avg += Number(selects[i].value);
                //Alert for debugging purposes
                //alert(selects[i].value+" "+avg);
            }
        }
        avg = avg / count;
        //Output average

        if(Input_choice == 1){
            document.getElementById("bpover1").value = avg;    
        }
        else {
            document.getElementById("bpover2").value = avg;    
        }

    }
    </script>
    <select class="select" name="Value[]" onChange="calcAvg(1);" style="width:100px">
        <option name="N/A">N/A</option>
        <option name="1">1</option>
        <option name="2">2</option>
        <option name="3">3</option>
    </select>&nbsp;&nbsp;&nbsp;
    <select class="select" name="Value[]" onChange="calcAvg(1);" style="width:100px">
        <option name="N/A">N/A</option>
        <option name="1">1</option>
        <option name="2">2</option>
        <option name="3">3</option>
    </select>&nbsp;&nbsp;&nbsp;
    <select class="select" name="Value[]" onChange="calcAvg(1);" style="width:100px">
        <option name="N/A">N/A</option>
        <option name="1">1</option>
        <option name="2">2</option>
        <option name="3">3</option>
    </select>&nbsp;&nbsp;&nbsp;
    <select class="select" name="Value[]" onChange="calcAvg(1);" style="width:100px">
        <option name="N/A">N/A</option>
        <option name="1">1</option>
        <option name="2">2</option>
        <option name="3">3</option>
    </select>&nbsp;&nbsp;&nbsp;
    <select class="select" name="Value[]" onChange="calcAvg(1);" style="width:100px">
        <option name="N/A">N/A</option>
        <option name="1">1</option>
        <option name="2">2</option>
        <option name="3">3</option>
    </select>&nbsp;&nbsp;&nbsp;
    <input type="text" name="Average" id="bpover1" readonly>
    <hr>
    <select class="select" name="Value[]" onChange="calcAvg(2);" style="width:100px">
        <option name="N/A">N/A</option>
        <option name="1">1</option>
        <option name="2">2</option>
        <option name="3">3</option>
    </select>&nbsp;&nbsp;&nbsp;
    <select class="select" name="Value[]" onChange="calcAvg(2);" style="width:100px">
        <option name="N/A">N/A</option>
        <option name="1">1</option>
        <option name="2">2</option>
        <option name="3">3</option>
    </select>&nbsp;&nbsp;&nbsp;
    <select class="select" name="Value[]" onChange="calcAvg(2);" style="width:100px">
        <option name="N/A">N/A</option>
        <option name="1">1</option>
        <option name="2">2</option>
        <option name="3">3</option>
    </select>&nbsp;&nbsp;&nbsp;
    <select class="select" name="Value[]" onChange="calcAvg(2);" style="width:100px">
        <option name="N/A">N/A</option>
        <option name="1">1</option>
        <option name="2">2</option>
        <option name="3">3</option>
    </select>&nbsp;&nbsp;&nbsp;
    <select class="select" name="Value[]" onChange="calcAvg(2);" style="width:100px">
        <option name="N/A">N/A</option>
        <option name="1">1</option>
        <option name="2">2</option>
        <option name="3">3</option>
    </select>&nbsp;&nbsp;&nbsp;
    <input type="text" name="Average" id="bpover2" readonly>
    <body>


    <h1>This is a Heading</h1>
    <p>This is a paragraph.</p>

    </body>
    </html>

答案 2 :(得分：0)

你错过了ID的点。 ID是独一无二的。一个页面只能有一个带有ID＆＃34; bpover＆＃34;

的元素

答案 3 :(得分：0)

  

您不能对多个输入使用相同的“名称”或相同的“ id ”   虽然元素，但它可能不会在客户端显示任何错误   这是一个严重的错误。

答案 4 :(得分：0)

在您的javascript函数中，您必须能够指定输入的来源以及输入的位置。 

function calcAvg(input_id, output_id) {
    //Get all elements with 'class="select"'
    var selects = document.getElementsByClassName(input_id);
    //Initialize vars
    var avg = 0;
    var count = 0;
    //Calculate average
    for (var i = 0; i < selects.length; i++) {
        if (selects[i].value != "N/A") {
            count++;
            avg += Number(selects[i].value);
            //Alert for debugging purposes
            //alert(selects[i].value+" "+avg);
        }
    }
    avg = avg / count;
    //Output average
    document.getElementById(output_id).value = avg;
}

大！现在我们必须通过对其类名进行分组来区分输入和输出。

<select class="select1" name="Value[]" onChange="calcAvg('select1','bpover1');" style="width:100px">
    <option name="N/A">N/A</option>
    <option name="1">1</option>
    <option name="2">2</option>
    <option name="3">3</option>
</select>&nbsp;&nbsp;&nbsp;
<select class="select1" name="Value[]" onChange="calcAvg('select1','bpover1');" style="width:100px">
    <option name="N/A">N/A</option>
    <option name="1">1</option>
    <option name="2">2</option>
    <option name="3">3</option>
</select>&nbsp;&nbsp;&nbsp;
<select class="select1" name="Value[]" onChange="calcAvg('select1','bpover1');" style="width:100px">
    <option name="N/A">N/A</option>
    <option name="1">1</option>
    <option name="2">2</option>
    <option name="3">3</option>
</select>&nbsp;&nbsp;&nbsp;
<select class="select1" name="Value[]" onChange="calcAvg('select1','bpover1');" style="width:100px">
    <option name="N/A">N/A</option>
    <option name="1">1</option>
    <option name="2">2</option>
    <option name="3">3</option>
</select>&nbsp;&nbsp;&nbsp;
<select class="select1" name="Value[]" onChange="calcAvg('select1', 'bpover1');" style="width:100px">
    <option name="N/A">N/A</option>
    <option name="1">1</option>
    <option name="2">2</option>
    <option name="3">3</option>
</select>&nbsp;&nbsp;&nbsp;
<input type="text" name="Average" id="bpover1" readonly>

请注意，在calcAvg（）函数中，我们现在传入输入和输出的类名，以便在计算平均值后知道写入的位置。

我们将相同的逻辑应用于第二行，例如

<select class="select2" name="Value[]" onChange="calcAvg('select2', 'bpover2');" style="width:100px">
    <option name="N/A">N/A</option>
    <option name="1">1</option>
    <option name="2">2</option>
    <option name="3">3</option>
</select>&nbsp;&nbsp;&nbsp;
<select class="select2" name="Value[]" onChange="calcAvg('select2', 'bpover2');" style="width:100px">
    <option name="N/A">N/A</option>
    <option name="1">1</option>
    <option name="2">2</option>
    <option name="3">3</option>
</select>&nbsp;&nbsp;&nbsp;
<select class="select2" name="Value[]" onChange="calcAvg('select2', 'bpover2');" style="width:100px">
    <option name="N/A">N/A</option>
    <option name="1">1</option>
    <option name="2">2</option>
    <option name="3">3</option>
</select>&nbsp;&nbsp;&nbsp;
<select class="select2" name="Value[]" onChange="calcAvg('select2', 'bpover2');" style="width:100px">
    <option name="N/A">N/A</option>
    <option name="1">1</option>
    <option name="2">2</option>
    <option name="3">3</option>
</select>&nbsp;&nbsp;&nbsp;
<select class="select2" name="Value[]" onChange="calcAvg('select2', 'bpover2');" style="width:100px">
    <option name="N/A">N/A</option>
    <option name="1">1</option>
    <option name="2">2</option>
    <option name="3">3</option>
</select>&nbsp;&nbsp;&nbsp;
<input type="text" name="Average" id="bpover2" readonly>

尝试这些更改，看看它对您有何帮助。 这是我在codepen.io中所做的：http://codepen.io/anon/pen/vxMLjK?editors=1010

附录： HTML中的ID应该是唯一的，您不能有多个元素共享相同的ID。另一方面，类名是可共享的。我确信还有其他方法可以将Select元素组合在一起，我现在无法想到任何关于我头脑的东西。

相关问题
最新问题