Tengo una matriz de 1, 1, 1, la función de cálculo promedio está bien, apuesto si agrego un nuevo dígito a la matriz, por ejemplo, 1 y uso la función recalcAverage para obtener la respuesta 7.75: ¿qué está mal? 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
calificaciones const=[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; }Cuando usa prompt() en JavaScript, siempre devuelve la entrada como una cadena, debe convertirla a Int o Float para calcular el promedio:
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>