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

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

javascript html

Javascript 计算平均值并在两个文本框中显示不同的结果,javascript,html,Javascript,Html,在计算平均值时，我必须在两个不同的文本框中显示不同的结果。但结果只有一个文本框中是相同的。如何在两个不同的文本框中显示平均值。这是我的代码函数{ //使用“class=select”获取所有元素 var selects=document.getelementsbyclassnamelect； //初始化变量 var平均值=0； var计数=0； //计算平均数对于变量i=0；i

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

函数{ //使用“class=select”获取所有元素 var selects=document.getelementsbyclassnamelect； //初始化变量 var平均值=0； var计数=0； //计算平均数对于变量i=0；i 它不起作用，因为有两个id属性具有相同的值。这是无效的HTML。在这种情况下，最好使用class属性，因为这样可以使您以多个元素为目标

将id更改为类属性

步骤1-更改第一个输入元素：

为此：

进一步阅读：

问题：两个输入具有相同的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>

您缺少ID为的点。ID是唯一的。一个页面只能有一个ID为bpover的元素

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

在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中所做的：

附件:

HTML中的ID应该是唯一的，不能有多个元素共享同一ID。另一方面，类名是可共享的。我确信还有其他方法可以将Select元素分组在一起，我现在想不出任何事情。

只需从getElementsByClassNamebpover.value中删除.value+1@trincot打字错误，但是的，当然。谢谢。@DebasishChoudhury很高兴我能帮忙：

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

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

    <!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>

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>

<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>