CODEWITHSUNDEEP
javascript
Prophete Baptiste
Prophete Baptiste

Reputation: 47

calculate average number in textbox

I have a form with multiple textboxes. The user will use the amount of wanted textboxes. There is a limit of course. How do I use JavaScript to figure out how many of the textboxes contain data?

Example: if the user has entered numbers in three textboxes, I expect to get 3 as the result. Also, with this number, I want the average of the textboxes (that are not empty). So if three textboxes had values and they were 56, 78 and 78, I would expect (56 + 78 + 78) / 3.

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;

val5 = parseFloat(document.form1.valeur_6.value);
if (isNaN(val5) == true ) val5=0;
document.form1.total.value = val1 + val2 + val3 + val4 + val5
}

i would like to divide by the number of textbox entered by the user to get the average

Upvotes: 0

Views: 1382

Answers (3)

Matt Burland
Matt Burland

Reputation: 45135

There are more elegant ways to do it, but using plain Javascipt and keeping it (hopefully) easy to follow:

var btn = document.getElementById("calc");
btn.addEventListener("click", function() {
    var total = 0;
    var count = 0;
    var values = document.getElementsByClassName("value");
    for (var i = 0; i < values.length; i++) {
        var num = parseFloat(values[i].value);
        if (!isNaN(num)) {
            total += num;
            count++;
        }
    }
    var totalTb = document.getElementById("total");
    totalTb.value = count ? total / count : "NaN";
});
<form id="form1">
    <input class="value" type="text"/>
    <input class="value" type="text"/>
    <input class="value" type="text"/>
    <input class="value" type="text"/>
    <input class="value" type="text"/>
    <br/><input type="text" id="total" readonly/>
    <input type="button" id="calc" value="calculate"/>
</form>

We attach a class to our input so we can select them with getElementsByClassName. Then we loop over that collection and try to parse the value in each one. If it is a valid number (i.e. isNaN return false), we add it to a running total and increment a counter of how many good values we've found. After the loop we just divide the total by the count (after checking count is greater than 0).

Upvotes: 0

Stefan Helmerichs
Stefan Helmerichs

Reputation: 502

From what I see, you'd need another counter with a loop which counts the occurences of NaN - else, an entered 0 will not be evaluated.

Once you have that, you can easily divide by that counter. So what you could do is this:

Function send() {
count = 0;
val1 = parseFloat(document.form1.valeur_2.value);
if (isNaN(val1) != true ) {
    count++;
} else {
    val1 = 0;
}
// repeat this for the other numbers as well

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;

val5 = parseFloat(document.form1.valeur_6.value);
if (isNaN(val5) == true ) val5=0;
document.form1.total.value = (val1 + val2 + val3 + val4 + val5) / count;
}

Upvotes: 0

Ram&#243;n Gil Moreno
Ram&#243;n Gil Moreno

Reputation: 819

You need to count how many valid values you have found.

You can simply use two variables:

  • One with the sum of valid amounts entered in the fields
  • Another one that you increment +1 when you find a valid amount in a field.

At the end you return the division sum/valid as average.

Beware of division by 0 in the case no field contains a value.

Upvotes: 1

Related Questions