Javascript function return output as undefined-CodePudding

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.

CodePudding user response：

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>

CodePudding user response：

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.