Get the number of edited inputs

Rain Lover · March 5, 2019

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">
  <head>
    <title>Average Grade</title>
  </head>
  <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>
    document.getElementById('calcBtn').addEventListener('click', function() {
     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>

DEMO

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 March 5, 2019 by Rain Lover

justsomeguy · March 5, 2019

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.

merazgasalim · March 14, 2019

Try this

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Average Grade</title>
  </head>
  <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;
   document.getElementById('nbr').addEventListener('input', function() {
     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;
     }
    });
    document.getElementById('calcBtn').addEventListener('click', function() {
     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>

dsonesuk · March 15, 2019

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Average Grade</title>
  </head>
  <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>
    document.getElementById('calcBtn').addEventListener('click', function() {
    var myformelem = document.getElementById('myform');
    var answeredArr = [];
    var total=0;
    for(i=0;i<myformelem.length;i++){
    if(myform.elements[i].value != myform.elements[i].defaultValue && myform.elements[i].id != "calcBtn"){
    answeredArr.push(myform.elements[i].value);
      total += parseInt(answeredArr[i]);
    }
    
    }

    document.getElementById('average').innerHTML=(total/(answeredArr.length)).toFixed(2);
     /*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.

Sign In

Get the number of edited inputs

Recommended Posts

Rain Lover

Link to comment

Share on other sites

justsomeguy

Link to comment

Share on other sites

merazgasalim

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity