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