calcluation平均和顯示不同的結果在兩個文本框

而計算平均值我必須在兩個不同的文本框中顯示不同的結果..但結果只有一個文本框相同...如何顯示平均兩個不同的文本box..here是我的代碼calcluation平均和顯示不同的結果在兩個文本框

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>

來源

2017-04-04 Debasish Choudhury

在您的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元素組合在一起，但我現在無法想到我頭上的任何東西。

來源

2017-04-04 21:52:20

謝謝你......它的工作很不錯... –

@DebasishChoudhury很高興我能幫忙:) –

而計算平均值我必須表現出兩種不同的文本不同的結果boxes..But的結果只來同一個文本框

它不起作用，因爲您有兩個具有相同值的id屬性。那是不是有效的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;

進一步閱讀：

來源

2017-04-04 21:38:03

只需從'getElementsByClassName（「bpover」）.value'移除'.value'';（+1） – trincot

@trincot錯字，但是肯定的事情。謝謝。 –

問題：兩個輸入有相同的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>

來源

2017-04-04 21:41:24

您錯過了帶有ID的點。 ID是獨一無二的。一個頁面只能有一個ID爲「bpover」的元素。

來源

2017-04-04 21:48:11 Asghar

不能用於多輸入使用相同的「名」或相同的「ID」元素的，雖然，它可能不會顯示任何錯誤，在客戶端上，但這是一個嚴重的錯誤。

來源

2017-04-04 21:48:55 gnath

calcluation平均和顯示不同的結果在兩個文本框

回答

相關問題