calcluation of average and show different results in two text boxes

Question

while calculating the average i have to show different results in two different text boxes..But the results come same in only one text box...how to display the average in two different text box..here is my code

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>

score 1 · Answer 1 · edited May 23 '17 at 11:46

while calculating the average i have to show different results in two different text boxes..But the results come same in only one text box

it's not working because you have two id attributes which have the same value. That is NOT valid HTML. In this case, it would be better to use class attribute as that would allow you to target multiple elements.

change id to class attributes.

step 1 - change the first input element:

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

to this:

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

step 2 - change the second input element:

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

to this:

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

then within your javascript:

change this:

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

to this:

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

further reading:

Just remove `.value` from `getElementsByClassName("bpover").value;` (+1) — trincot, Apr 04 '17 at 21:39

score 0 · Answer 2 · answered Apr 04 '17 at 21:41

Problem: Both input have same ID.

Solution: try this code

simply passed id value to identify which input you are trying to point here.

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

score 0 · Answer 3 · answered Apr 04 '17 at 21:48

0

You are missing the point with ID. ID's are unique. One page can have only one element with ID "bpover".

answered Apr 04 '17 at 21:48

Syed Asghar

1
1
3

score 0 · Answer 4 · answered Apr 04 '17 at 21:48

0

You can not use same "name" or same "id" for multiple input element's though, It might not show any errors on the client side but it's a serious mistake.

answered Apr 04 '17 at 21:48

gnath

796
5
8

score 0 · Accepted Answer · answered Apr 04 '17 at 21:52

On your javascript function, you have to be able to specify where the input is coming from and where it's going.

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

Great! Now we have to differentiate the inputs and the outputs just a little bit by grouping their class names.

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

Notice that in the calcAvg() function, we now pass in the class names of both the input and the output so we know where to write to once the average is calculated.

We apply this same logic to the second row, something like

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

Try these changes and see how that works for you. Here is what I did in codepen.io: http://codepen.io/anon/pen/vxMLjK?editors=1010

APPENDIX: IDs in HTML are supposed to be unique, you cannot have more than one element share the same ID. Class names on the other hand are shareable. I'm sure there are other ways to go about grouping the Select element together, I just can't think of anything of the top of my head at the moment.

@DebasishChoudhury Glad I could help :) – Matthew S Apr 04 '17 at 22:02 — Matthew S, Apr 04 '17 at 22:02

calcluation of average and show different results in two text boxes

5 Answers5