Javascript function return output as undefined

Question

I'm new to Javascript and I'm currently trying to create a simple program consists of 2 functions which one is calculating total of student grades and the other is to calculate the the average of the grade. Here's the code

var grades = [80, 87, 94, 82, 62, 98, 81, 81, 74, 91];

var sum = 0;

function accumulatedGrades(){
    for (index = 0; index<grades.length; index++){
        sum += grades[index];
    }
    
    return sum / grades.length;
}


function tests(){
    document.getElementById('average').innerHTML = document.write(sum/grades.length);
}

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        
        <script src="js/example.js"></script>
    </head>
    
    <body>
    
        <h2 style="color: blueviolet">Grades</h2>
        
        <h3>This is all the grades: <br>80, 87, 94, 82, 62, 98, 81, 81, 74, and 91</h3>
        
        
        
        <h2 style="color: blueviolet">Average</h2>
        
        <h3 id='average'><script>tests()</script></h3>
        
    </body>
    
</html>

I've tried to play around with the function tests() and used document.write() but I the output I've seen so far is undefined or no output is showing at all.

Does this means it should be something like this? document.getElementById('average').innerHTML = (sum/grades.length); — Darlisa Cardiff
– Darlisa Cardiff, Commented Nov 9, 2021 at 5:01

Suhail Akhtar · Accepted Answer · 2021-11-09 05:13:46Z

1

accumulatedGrades function is never called so sum is 0. document.write and innerHTML does not work as you have given. document.write writes on the document and innerHTML is the property of individual element. tests function is not available in html file. I have updated the code, fixed the accumulatedGrades function to calculate the sum correctly. Fixed the html and calling the tests function in js file itself.

var grades = [80, 87, 94, 82, 62, 98, 81, 81, 74, 91];

var sum = 0;

function accumulatedGrades() {
  for (index = 0; index < grades.length; index++) {
sum += grades[index];
  }
  return sum;
}

function tests() {
  document.getElementById('average').innerHTML = (accumulatedGrades()) / grades.length;
}

tests()

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        
        <script src="js/example.js"></script>
    </head>
    
    <body>
        <h2 style="color: blueviolet">Grades</h2>
        <h3>This is all the grades: <br>80, 87, 94, 82, 62, 98, 81, 81, 74, and 91</h3>
        <h2 style="color: blueviolet">Average</h2>
        <h3 id='average'></h3>

    </body>
    
</html>

answered Nov 9, 2021 at 5:13

Suhail Akhtar

2,07320 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Darlisa Cardiff Over a year ago

Thank you very much for the detailed explanation. The solution works and helps me to understand this better!

pso · Accepted Answer · 2021-11-09 05:17:54Z

0

document.write() can delete content if it is called after the page loaded.

function averageGrades(){
    for (index = 0; index<grades.length; index++){
        sum += grades[index];
    }
    
    return sum / grades.length;
}

document.getElementById('average').innerHTML = averageGrades();

Check this code and let me know if it needs explanation.

answered Nov 9, 2021 at 5:17

pso

5332 silver badges16 bronze badges

Collectives™ on Stack Overflow

Javascript function return output as undefined

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related