I need some help. I'm trying to build an app that calculate the average of the given numbers. Yet, I'm a beginner and my array functions doesn't always work. I managed to display entered numbers but now I want to add them and calculate the average. I'm almost there. To calculate the average I will divide the sum by the array's length. But I can't add the numbers from the array to add. They are being concatenated or Nan is displayed. Should I use: Number() method somewhere?
BTW, I know for some of you this question may be pathetic but I'm a self-lerner and a bit of an old timer, so please don't downgrade this question. I tried to google answers but they didn't solve the problem.
let numbersEntered = document.querySelector("#numbersEntered");
let inputEl = document.querySelector("#input");
let numArr = [];
// buttons
let enterBtn = document.querySelector("#enter");
let avgBtn = document.querySelector("#avg");
enterBtn.addEventListener("click", displayNums);
function displayNums() {
let newNumber = Number(inputEl.value);
numArr.push(newNumber);
numbersEntered.innerHTML = "";
console.log(numArr);
for (let i = 0; i < numArr.length; i++) {
numbersEntered.innerHTML += numArr[i] + ",";
}
}
avgBtn.addEventListener("click", displayAvg);
// the below code is totally useless - I can't get the right sum
function displayAvg() {
let total = 0;
for (let i = 0; i < numArr.length; i++) {
total += numArr[i];
console.log(total);
}
}<input type="text" id="input" />
<button id="enter" type="button">Enter</button>
<p id="numbersEntered"></p>
<button id="avg" type="button">Average</button>
<p id="average"></p>
</div>In your displayNums function,
Currently, You are pushing in the array as text/string values and while doing the addition, It is contacting numbers as it is text. like '23', it should just 23.
Change it to:
let newNumber = Number(inputEl.value);
numArr.push(newNumber);
Working fiddle here - https://jsfiddle.net/La8z52rn/
Parse int the value to number, currently it is of type string
let numbersEntered = document.querySelector("#numbersEntered");
let average = document.querySelector("#average");
let inputEl = document.querySelector("#input");
let numArr = [];
// buttons
let enterBtn = document.querySelector("#enter");
let avgBtn = document.querySelector("#avg");
enterBtn.addEventListener("click", displayNums);
function displayNums() {
let newNumber = inputEl.value;
numArr.push(parseInt(newNumber));
numbersEntered.innerHTML = "";
for (let i = 0; i < numArr.length; i++) {
numbersEntered.innerHTML += numArr[i] + ",";
}
}
avgBtn.addEventListener("click", displayAvg);
// the below code is totally useless - I can't get the right sum
function displayAvg() {
let total = 0;
for (let i = 0; i < numArr.length; i++) {
total = total + numArr[i];
}
average.innerHTML = total/numArr.length
}<input type="number" id="input" />
<button id="enter" type="button">Enter</button>
<p id="numbersEntered"></p>
<button id="avg" type="button">Average</button>
<p id="average"></p>you are almost there... just compute your average outside the for
let numbersEntered = document.querySelector("#numbersEntered");
let inputEl = document.querySelector("#input");
let numArr = [];
// buttons
let enterBtn = document.querySelector("#enter");
let avgBtn = document.querySelector("#avg");
enterBtn.addEventListener("click", displayNums);
function displayNums() {
let newNumber = Number(inputEl.value);
numArr.push(newNumber);
numbersEntered.innerHTML = "";
console.log(numArr);
for (let i = 0; i < numArr.length; i++) {
numbersEntered.innerHTML += numArr[i] + ",";
}
}
avgBtn.addEventListener("click", displayAvg);
// the below code is totally useless - I can't get the right sum
function displayAvg() {
let total = 0;
for (let i = 0; i < numArr.length; i++) {
total += numArr[i];
}
// FIXED HERE
console.log(total/numArr.length);
}<input type="text" id="input" />
<button id="enter" type="button">Enter</button>
<p id="numbersEntered"></p>
<button id="avg" type="button">Average</button>
<p id="average"></p>
</div>