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
 
 Reply to this topicStart new topic
Replies
Christian J
post Mar 8 2019, 02:12 PM
Post #2


.
********

Group: WDG Moderators
Posts: 9,656
Joined: 10-August 06
Member No.: 7
Here's one with a regex instead of isNaN:

CODE
Math:
<input type="number" class="test">
<input type="number" class="test">
<input type="number" class="test">

Average grade:
<span id="average"></span>
<br>
<input type="button" value="Calculate" id="calcBtn">

<script>
document.getElementById('calcBtn').addEventListener('click', function()
{
    // any number of elements
    var test_input=document.getElementsByClassName('test');

    var grades_arr=new Array();

    for(var i=0; i<test_input.length; i++)
    {
        var val=test_input[i].value;

        // remove numerical characters from sample, to see if any invalid characters remain
        var invalid=val.replace(/[0-9]/g,'');

        if(val.length>0 && invalid.length==0) // at least one character must be entered, but no invalid characters
        {
            val=1*val; // convert to number type
            grades_arr.push(val); // add valid number values to array
        }
        else
        {
            //alert('Field '+i+' is empty or invalid');
        }
    }

    // calculate average
    if(grades_arr.length>0) // at least one form field must be filled in correctly by user
    {
        var grades=0;
        for(var i=0; i<grades_arr.length; i++)
        {
            grades=grades+grades_arr[i];
        }
        grades=grades/grades_arr.length;
        document.getElementById('average').innerHTML=grades;
    }
    else
    {
        //alert('No valid data was entered');
    }
}
);
</script>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Posts in this topic
RainLover   Get the number of edited inputs   Mar 5 2019, 08:19 AM
Christian J   If the student doesn't take some tests, the a...   Mar 5 2019, 03:44 PM
RainLover   If the student doesn't take some tests, the ...   Mar 5 2019, 10:34 PM
Christian J   Here's an idea: Math: <input type=...   Mar 6 2019, 11:55 AM
pandy   Is checking for NaN really needed? Provided browse...   Mar 6 2019, 03:40 PM
Christian J   Is checking for NaN really needed? Provided brows...   Mar 6 2019, 04:52 PM
pandy   No, it doesn't. I asked mainly because I wasn...   Mar 7 2019, 05:52 AM
Christian J   Then again NaN is a tricky property that I don...   Mar 7 2019, 06:10 AM
Christian J   Seems IE11 does need checking with isNaN(), since ...   Mar 7 2019, 10:56 AM
pandy   Always IE, eh? Still. Anyway, I have this page bo...   Mar 7 2019, 05:30 PM
Christian J   I didn't understand that example either. As ...   Mar 8 2019, 06:16 AM
Christian J   Here's one with a regex instead of isNaN: Mat...   Mar 8 2019, 02:12 PM
RainLover   Here's one with a regex instead of isNaN: Ma...   Mar 9 2019, 10:41 AM
Christian J   You're welcome!   Mar 9 2019, 12:43 PM

« Next Oldest · Client-side Scripting · Next Newest »
 

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

 

Display Mode: Switch to: Standard · Switch to: Linear+ · Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 24th April 2024 - 08:47 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC