# Get the number of edited inputs

## Recommended Posts

Scenario

Every semester my students need to take at least one test. The following form gives the right average grade of a student:

```<!DOCTYPE html>
<html lang="en">
<body>
<form>
Math: <input type="number" id="test1">
<input type="number" id="test2">
<input type="number" id="test3">
<output id="average"></output>
<br>
<input type="button" value="Calculate" id="calcBtn">
</form>
<script>
var test1 = document.getElementById('test1').value;
var test2 = document.getElementById('test2').value;
var test3 = document.getElementById('test3').value;
var average = document.getElementById('average');
average.value = (Number(test1)+Number(test2)+Number(test3)) / 3;
});
</script>
</body>
</html>```

The problem is it works right only if all the fields are edited. If the student doesn't take some tests, the average grade won't show the right value. I know it's because of dividing by the fixed number 3 when it calculates the average grade:

`average.value = (Number(test1)+Number(test2)+Number(test3)) / 3;`

Question

What is a simple approach to get the number of changed input fields?

Edited by Rain Lover
##### Share on other sites

Test each input you get and put any non-empty inputs into an array.  Then you can sum the array elements and divide by the array length.

• 1
##### Share on other sites

• 2 weeks later...

Try this

```<!DOCTYPE html>
<html lang="en">
<body>
<form>
Nubmer Of tests:<input type="number" id="nbr" value="0" min="0" max="3">
Math: <input type="number" id="test1"  disabled>
<input type="number" id="test2" disabled>
<input type="number" id="test3" disabled>
<output id="average"></output>
<br>
<input type="button" value="Calculate" id="calcBtn">
</form>
<script>
var testNbr = document.getElementById('nbr').value;
testNbr = document.getElementById('nbr').value;
switch(testNbr){
case '1' :
document.getElementById('test1').disabled = false;
document.getElementById('test2').disabled = true;
document.getElementById('test3').disabled = true;
document.getElementById('test2').value = 0;
document.getElementById('test3').value = 0;
break;
case '2' :
document.getElementById('test1').disabled = false;
document.getElementById('test2').disabled = false;
document.getElementById('test3').disabled = true;
document.getElementById('test3').value = 0;
break;
case '3' :
document.getElementById('test1').disabled = false;
document.getElementById('test2').disabled = false;
document.getElementById('test3').disabled = false;
break;
default:
document.getElementById('test1').disabled = true;
document.getElementById('test2').disabled = true;
document.getElementById('test3').disabled = true;
}
});
var test1 = document.getElementById('test1').value;
var test2 = document.getElementById('test2').value;
var test3 = document.getElementById('test3').value;
var average = document.getElementById('average');
average.value = (Number(test1)+Number(test2)+Number(test3)) / testNbr;
});
</script>
</body>
</html>```

##### Share on other sites

```<!DOCTYPE html>
<html lang="en">
<body>
<form id="myform">
Math: <input type="number" id="test1">
<input type="number" id="test2">
<input type="number" id="test3">
<output id="average"></output>
<br>
<input type="button" value="Calculate" id="calcBtn">
</form>
<script>
var myformelem = document.getElementById('myform');
var total=0;
for(i=0;i<myformelem.length;i++){
if(myform.elements[i].value != myform.elements[i].defaultValue && myform.elements[i].id != "calcBtn"){
}

}

/*var test1 = document.getElementById('test1').value;
var test2 = document.getElementById('test2').value;
var test3 = document.getElementById('test3').value;

average.value = (Number(test1)+Number(test2)+Number(test3)) / 3;*/
});
</script>
</body>
</html>```

Like mentioned the array can store values to add together for total, then use array again to identify the number answered to divide by for average.