average calculation and recalculation function in javascript-CodePudding

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:

    <div id="cube">
        <div>ARRAY IS</div>
        <div id="grades"></div>
    </div> 
    
    <div id="button">
        <button onclick="addGrade()">Add grade</button>
        
    </div>
    
    <div id="cube2">
        <div>AVERAGE IS</div>
        <div id="average"></div>
    </div>   

    <div id="button">
        <button onclick="recalcAverage()">Recalculate average</button>
        <div>NEW AVERAGE IS</div>
        <div id="average2"></div>
    </div>
    
</body>

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;

}

CodePudding user response：

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);

CodePudding user response：

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

 <div>
          <p>Average: <span id="ave"></span></p>
          <p>Update: <span id="update"></span></p>
          <p>New Average: <span id="new-ave"></span></p>
      </div>