title: JavaScript: Get number of edited/updated inputs
body: <h2>Scenario</h2>
  
  <p>Every semester my students need to take at least one science, one physics and one history test. The following form gives the right average grades as well as the final grade of a student:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>document.getElementById('calcBtn').addEventListener('click', function() {
    var scienceTest1 = document.getElementById('scienceTest1').value;
    var scienceTest2 = document.getElementById('scienceTest2').value;
    var scienceTest3 = document.getElementById('scienceTest3').value;
    var physicsTest1 = document.getElementById('physicsTest1').value;
    var physicsTest2 = document.getElementById('physicsTest2').value;
    var physicsTest3 = document.getElementById('physicsTest3').value;
    var historyTest1 = document.getElementById('historyTest1').value;
    var historyTest2 = document.getElementById('historyTest2').value;
    var historyTest3 = document.getElementById('historyTest3').value;
    var scienceAverage = document.getElementById('scienceAverage');
    var physicsAverage = document.getElementById('physicsAverage');
    var historyAverage = document.getElementById('historyAverage');
    var finalGrade = document.getElementById('finalGrade');
    scienceAverage.value = (Number(scienceTest1) + Number(scienceTest2) + Number(scienceTest3)) / 3;
    physicsAverage.value = (Number(physicsTest1) + Number(physicsTest2) + Number(physicsTest3)) / 3;
    historyAverage.value = (Number(historyTest1) + Number(historyTest2) + Number(historyTest3)) / 3;
    finalGrade.value = (scienceAverage.value * 5 + physicsAverage.value * 3 + historyAverage.value * 2) / 10;
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form&gt;
    Science: &lt;input type="number" id="scienceTest1"&gt;
    &lt;input type="number" id="scienceTest2"&gt;
    &lt;input type="number" id="scienceTest3"&gt;
    &lt;output id="scienceAverage"&gt;&lt;/output&gt;
    &lt;br&gt; Physics: &lt;input type="number" id="physicsTest1"&gt;
    &lt;input type="number" id="physicsTest2"&gt;
    &lt;input type="number" id="physicsTest3"&gt;
    &lt;output id="physicsAverage"&gt;&lt;/output&gt;
    &lt;br&gt; History: &lt;input type="number" id="historyTest1"&gt;
    &lt;input type="number" id="historyTest2"&gt;
    &lt;input type="number" id="historyTest3"&gt;
    &lt;output id="historyAverage"&gt;&lt;/output&gt;
    &lt;br&gt;
    &lt;input type="button" value="Calculate" id="calcBtn"&gt;
    &lt;output id="finalGrade"&gt;&lt;/output&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The problem is it only works if all the fields are edited. If the student doesn't take some tests, the average grades won't show the correct values. I know it's because of dividing by the fixed number <code>3</code> when it calculates the average grades:</p>
  
  <pre class="lang-js prettyprint-override"><code>scienceAverage.value = (Number(scienceTest1) + Number(scienceTest2) + Number(scienceTest3)) / 3;
  physicsAverage.value = (Number(physicsTest1) + Number(physicsTest2) + Number(physicsTest3)) / 3;
  historyAverage.value = (Number(historyTest1) + Number(historyTest2) + Number(historyTest3)) / 3;
  </code></pre>
  
  <h2>Question</h2>
  
  <p>What is a simple approach to get the number of <em>changed</em> input fields in the following single row? I'll try to understand your method and then develop my form to multiple rows.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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;
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form&gt;
    &lt;input type="number" id="test1"&gt;
    &lt;input type="number" id="test2"&gt;
    &lt;input type="number" id="test3"&gt;
    &lt;output id="average"&gt;&lt;/output&gt;
    &lt;br&gt;
    &lt;input type="button" value="Calculate" id="calcBtn"&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>