The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> Get the number of edited inputs
RainLover
post Mar 5 2019, 08:19 AM
Post #1


Advanced Member
****

Group: Members
Posts: 216
Joined: 16-November 09
Member No.: 10,346



Scenario

Every semester my students need to take at least one test. The following form gives the right average grade of a student:
CODE
<!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>

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:
CODE
average.value = (Number(test1)+Number(test2)+Number(test3)) / 3;


Question

What is a simple approach to get the number of changed input fields?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Posts in this topic


Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 6th December 2019 - 08:08 AM