如何添加数组元素，而不是将它们连接为字符串

Question

我需要一些帮助。我正在尝试构建一个应用程序来计算给定数字的平均值。然而，我是一个初学者，我的数组函数并不总是有效的。我设法显示了输入的数字，但现在我想把它们相加并计算平均值。我快到了。为了计算平均值，我将总和除以数组的长度。但我无法将数组中的数字相加。它们正在连接或显示Nan。我应该在某个地方使用：Number((方法吗？

顺便说一句，我知道对你们中的一些人来说，这个问题可能很可悲，但我是一个自我提醒者，有点过时了，所以请不要降级这个问题。我试着用谷歌搜索答案，但它们没有解决问题。

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>

Answer 1

将int值解析为数字，当前类型为字符串

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>

Answer 2

您就快到了。。。只需计算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>

Answer 3

在displayNums函数中，

目前，您正在以text/string值的形式推入数组，在进行加法时，它正在以文本的形式联系数字。就像"23"一样，应该只有23。

更改为：

let newNumber = Number(inputEl.value);
numArr.push(newNumber);

在这里工作小提琴-https://jsfiddle.net/La8z52rn/