average calculation and recalculation function in javascript

Question

I have array of 1, 1, 1, the function of average calculation is ok, bet if I add new digit to array, for example 1 and use function recalcAverage so I get the answer 7.75 - what is wrong? HTML:

    
        ARRAY IS
        
     
    
    
        
        
    
    
    
        AVERAGE IS
        
       

    
        
        NEW AVERAGE IS

JAVASCRIPT

const grades=[1, 1, 1];

function loadGrades(){
    document.getElementById("grades").innerHTML = grades;    
}

function calcAverage(){
    var sum = 0;
    for ( let index=0; index < grades.length; index++ ) {
        sum += grades[index];
    }

    var average = (sum / grades.length );

    document.getElementById("average").innerHTML = average;
}


function addGrade(){
    var grade = prompt("Add new grade");
    grades[grades.length] = grade;
    document.getElementById("grades").innerHTML = grades;
}


function recalcAverage(){
    var sum2 = 0;
    for ( let i=0; i < grades.length; i++ ) {
        sum2 += grades[i];
    }

    var average2 = (sum2 / grades.length );

    document.getElementById("average2").innerHTML = average2;

}

user_14873522 · Answer

When you use prompt() in JavaScript, it always returns the input as a string, you have to convert it to an Int or Float to calculate the average:

var grade = prompt("Add new grade");

grades[grades.length] = parseInt(grade);

user_10355765 · Answer

const grades=[1, 1, 1];
//step 1 make grade loader reusable by passing a parameter
function gradeLoader(targetEl, result){  //is better to use console for your debugging
    document.getElementById(`${targetEl}`).innerHTML = result;
}

function calAverage(grade){
    return grade.reduce((curr, acc) => curr + acc ,0)/grade.length;
}

console.log('average :', calAverage(grades))


//step 2  adding new grade to the grades array
const addGrade = newGrade => {
    grades.push(newGrade);
    return grades;
};

console.log('adding new :', addGrade(5))

//step 3   you dont have to recalculate average
// just re-use your functions
const update = calAverage(addGrade(3))
console.log('new average', update)



//if you insist on using HTML for your display you may run into problems 

//1. result 1 ---average
  const averageResult = calAverage(grades)
gradeLoader('ave', averageResult)


//2. updating the array list 
const updateGrade = addGrade(3);
gradeLoader('update', updateGrade)


//3. new average
gradeLoader('new-ave', update)

//spend more time on array, array methods, and functions. 
// do alot research before you post here thanks

 
          Average: 
          Update: 
          New Average:

average calculation and recalculation function in javascript

2 Answers