JS average calc

javascript average of three numbers
javascript average array of objects
calculate average java
calculate average height javascript
javascript cumulative average
min max average javascript
javascript sum
best average grade javascript

I'm trying to create a site that calculates the annual average grade of someone in a certain subject. But, when clicking the button "Calculate", it returns "[object HTMLHeadingElement][object HTMLHeadingElement][object HTMLHeadingElement][object HTMLHeadingElement][object HTMLHeadingElement]NaN". What's wrong?

<!DOCTYPE html>
<html lang="pt-br">
    <meta charset="utf-8"/>
    <head>
        <title>Annual Average Grade</title>
        <meta name="description" content="Calculate your annual average grade."/>
        <link rel="apple-touch-icon" sizes="180x180" href="../favicons/apple-touch-icon.png">
        <link rel="icon" type="image/png" sizes="32x32" href="../favicons/favicon-32x32.png">
        <link rel="icon" type="image/png" sizes="192x192" href="../favicons/android-chrome-192x192.png">
        <link rel="icon" type="image/png" sizes="16x16" href="../favicons/favicon-16x16.png">
        <link rel="manifest" href="../favicons/site.webmanifest">
        <link rel="mask-icon" href="../favicons/safari-pinned-tab.svg" color="#5bbad5">
        <link rel="shortcut icon" href="../favicons/favicon.ico">
        <meta name="msapplication-TileColor" content="#da532c">
        <meta name="msapplication-TileImage" content="../favicons/mstile-144x144.png">
        <meta name="msapplication-config" content="../favicons/browserconfig.xml">
        <meta name="theme-color" content="#ffffff">
    </head>
    <style>
        h1, h2, h3, h4, h5, h6 {
            font-family: 'Segoe UI';
        }
        a, b {
            font-family: 'Segoe UI';
        }
        button {
            border-radius: 5px 5px 5px 5px;
            background-color: white;
        }
        input {
            border-radius: 5px 5px 5px 5px;
            border-color: black;
            border-width: 1px;
            height: 25px;
        }
        .align-left {
            text-align: left;
        }
        .align-center {
            text-align: center;
        }
        .align-right {
            text-align: right;
        }
        .title {
            text-align: center;
            font-weight: bolder;
        }
        .description {
            text-align: center;
            font-size: 17px;
            font-weight: lighter;
        }
        .subtitle {
            text-align: center;
            font-size: 30px;
            font-weight: bolder;
        }
        .grade {
            text-align: center;
            margin-left: 15px;
        }
    </style>
    <body>
        <h1 class="title" style="margin-left: 15px">Annual Average Grade</h1>
        <h2 class="description" style="margin-top: -20px">Calculate your annual average grade.</h2>
        <br/>
        <br/>
        <h3 class="subtitle">Mathematics</h3>
        <div class="grade">
        <h4 id="first-grade">1st grade:</h3><input type="number"/>
        <h4 id="second-grade">2nd grade:</h3><input type="number"/>
        <h4 id="third-grade">3rd grade:</h3><input type="number"/>
        <h4 id="fourth-grade">4th grade:</h3><input type="number"/>
        <h4 id="fifth-grade">5th grade</h3><input type="number"/>
        <h4 id="sixth-grade">6th grade:</h3><input type="number"/>
        </div>
        <br/>
        <div class="align-center">
        <button onclick="calcGradeAverage()">Calculate</button>
        </div>
        <script>
            function calcGradeAverage() {
                var firstGrade = document.getElementById('first-grade');
                var secondGrade = document.getElementById('second-grade');
                var thirdGrade = document.getElementById('third-grade');
                var fourthGrade = document.getElementById('fourth-grade');
                var fifthGrade = document.getElementById('fifth-grade');
                var sixthGrade = document.getElementById('sixth-grade');
                var res = firstGrade + secondGrade + thirdGrade + fourthGrade + fifthGrade + sixthGrade / 6;
                document.write(res);
         }
        </script>
    </body>
</html>

You're calculating your grades with the hmtl-objects. you need to get the value out of there (with .value() )

JavaScript Arrays, Calculating the mean / average in JavaScript. Add up all of the numbers. This is called the sum. Count how many numbers there are. Finally, we divide how many numbers there are into the sum. Use function to calculate average in JavaScript. Next » 755/1956 « Previous. Use function to calculate average in JavaScript Description.

Replace your code with the one below : I will explain why.

Explanation (I will explain in a verrrrry simplified way ;-) ):

*For us to see the results of our calculation , we need to calculate the average of the grades

*For us to calculate the average of grades , we need to first have the grades

*For us to have the grades , we need values from the forms

*For us to have the values , we need to access the HTML DOM

The way to access the DOM elements is this way

    document.getElementById('myid');

The way to access values in a DOM element is this way

    document.getElementById('myid').value;

*So in HTML , I took the id="" from <h3> and placed it in <input> tags *Then in JavaScript , I called the values inputted by the user .

Thats all .

 <!DOCTYPE html><html lang="pt-br">
    <meta charset="utf-8"/>
    <head>
        <title>Annual Average Grade</title>
        <meta name="description" content="Calculate your annual average grade."/>
        <link rel="apple-touch-icon" sizes="180x180" href="../favicons/apple-touch-icon.png">
        <link rel="icon" type="image/png" sizes="32x32" href="../favicons/favicon-32x32.png">
        <link rel="icon" type="image/png" sizes="192x192" href="../favicons/android-chrome-192x192.png">
        <link rel="icon" type="image/png" sizes="16x16" href="../favicons/favicon-16x16.png">
        <link rel="manifest" href="../favicons/site.webmanifest">
        <link rel="mask-icon" href="../favicons/safari-pinned-tab.svg" color="#5bbad5">
        <link rel="shortcut icon" href="../favicons/favicon.ico">
        <meta name="msapplication-TileColor" content="#da532c">
        <meta name="msapplication-TileImage" content="../favicons/mstile-144x144.png">
        <meta name="msapplication-config" content="../favicons/browserconfig.xml">
        <meta name="theme-color" content="#ffffff">
    </head>
    <style>
        h1, h2, h3, h4, h5, h6 {
            font-family: 'Segoe UI';
        }
        a, b {
            font-family: 'Segoe UI';
        }
        button {
            border-radius: 5px 5px 5px 5px;
            background-color: white;
        }
        input {
            border-radius: 5px 5px 5px 5px;
            border-color: black;
            border-width: 1px;
            height: 25px;
        }
        .align-left {
            text-align: left;
        }
        .align-center {
            text-align: center;
        }
        .align-right {
            text-align: right;
        }
        .title {
            text-align: center;
            font-weight: bolder;
        }
        .description {
            text-align: center;
            font-size: 17px;
            font-weight: lighter;
        }
        .subtitle {
            text-align: center;
            font-size: 30px;
            font-weight: bolder;
        }
        .grade {
            text-align: center;
            margin-left: 15px;
        }
    </style>
    <body>
        <h1 class="title" style="margin-left: 15px">Annual Average Grade</h1>
        <h2 class="description" style="margin-top: -20px">Calculate your annual average grade.</h2>
        <br/>
        <br/>
        <h3 class="subtitle">Mathematics</h3>
        <div class="grade">
        <h3 >1st grade:</h3><input type="number" id="first-grade" />
        <h3 >2nd grade:</h3><input type="number" id="second-grade" />
        <h3 >3rd grade:</h3><input type="number" id="third-grade" />
        <h3 >4th grade:</h3><input type="number" id="fourth-grade" />
        <h3 >5th grade:</h3><input type="number" id="fifth-grade" />
        <h3 >6th grade:</h3><input type="number" id="sixth-grade" />
        </div>
        <br/>
        <div class="align-center">
        <button onclick="calcGradeAverage()">Calculate</button>
        </div>
        <script>
            function calcGradeAverage() {
                var firstGrade = document.getElementById('first-grade').value;
                var secondGrade = document.getElementById('second-grade').value;
                var thirdGrade = document.getElementById('third-grade').value;
                var fourthGrade = document.getElementById('fourth-grade').value;
                var fifthGrade = document.getElementById('fifth-grade').value;
                var sixthGrade = document.getElementById('sixth-grade').value;
                var res = firstGrade + secondGrade + thirdGrade + fourthGrade + fifthGrade + sixthGrade / 6;
                document.write(res);
         }
         /*
         Explanation (I will explain in a verrrrry simplified way ;-) ):

         *For us to see the results of our calculation , we need to calculate the average of the grades
         *For us to calculate the average of grades , we need to first have the grades
         *For us to have the grades , we need values from the forms
         *For us to have the values , we need to access the HTML DOM

         The way to access the DOM elements is this way

            document.getElementById('myid')

         The way to access values in a DOM element is this way

            document.getElementById('myid').value

          *So in HTML , I took the id="" from <h3> and placed it in <input> tags
          *Then in JavaScript , I called the values inputted by the user .

          Thats all .
         */
        </script>
    </body>
</html>

Average Calculator, The length of the array. Both are pretty easy on their own. And calculating averages isn't that hard for an array of numbers. Here's a simple  Just iterate through the array, since your values are strings, they have to be converted to an integer first. And average is just the sum of values divided by the number of values. improve this answer. edited Oct 20 '14 at 15:27. 11 bronze badges. answered Apr 28 '12 at 1:54. 11 silver badges. 25 bronze badges.

You just need to put .value

var firstGrade = document.getElementById('first-grade').value;
var secondGrade = document.getElementById('second-grade').value;
var thirdGrade = document.getElementById('third-grade').value;
var fourthGrade = document.getElementById('fourth-grade').value;
var fifthGrade = document.getElementById('fifth-grade').value;
var sixthGrade = document.getElementById('sixth-grade').value;

It is also good practice to write a doctype like this:

<!DOCTYPE html>

although it is not required.

Program for average of an array (Iterative and Recursive , , we first use reduce() to reduce all values in our array to a single sum. Average =. Sum. Count. where the sum is the result of adding all of the given numbers, and the count is the number of values being added. For example, given the 5 numbers, 2, 7, 19, 24, and 25, the average can be calculated as such: Average =. 2 + 7 + 19 + 24 + 25. 5.

of 24 , 55 , 17 , 87 and 100 . Simply find the sum of the numbers: 24 + 55 + 17 + 87 + 100 = 283 and divide by 5 to get 56.6 . The weighted average grade is calculated by: Weighted grade = = w 1 ×g 1 + w 2 ×g 2 + w 3 ×g 3 = 30%×80+ 50%×90+ 20%×72 = 83.4. When the weights are not in percent (hours or points), you should also divided by the sum of the weights: Weighted grade = (w 1 ×g 1 + w 2 ×g 2 + w 3 ×g 3 +) / (w 1 +w 2 +w 3 +) Example. 3 points Math course with grade of 80.

elements divided by the number of elements. Examples : Input : arr[] = {1, 2, 3, 4, 5} Output : 3 Sum of the elements is 1+2+3+4+5 = 15 and total number of elements is 5. The average of a set of numbers is simply the sum of the numbers divided by the total number of values in the set. For example, suppose we want the average of 24,55, 17, 87and 100. Simply find the sum of the numbers: 24 + 55 + 17 + 87 + 100 = 283and divide by 5to get 56.6.

Typo fix (missing bracket for getElementById ): var a=parseInt(document.​getElementById("one").value); var b=parseInt(document. The average (mean) is equal to the sum of all the data values divided by the count of values in the data set. Average = Sum / Count = 268 / 16 = 16.75

Comments
  • You're retrieving the headings, not the inputs.
  • @j08691 How can I retrieve the inputs?
  • The easiest way would be to move the IDs from the heading to the inputs. Then you could do parseInt( document.getElementById('first-grade').value, 10); ... which would return the integer value of the string being input.
  • Thanks for the comment. I edited the post. Please upvote, because I am a new member.