how to add array elements instead of concatenating them as strings

Question

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>

`let newNumber = inputEl.value;` - since you read this from a text input field this will obviously also be text. You need to explicitly try to convert it to a number — UnholySheep, Jan 26 '22 at 13:26
it seems to work but it gives me three numbers and I want just the final one — TomDev, Jan 26 '22 at 13:29
you can completely remove this headache by making the input `type="number"` instead of `type="text"`, but for some reason if you want to support spaces, commas etc. You can convert it into a number and then push it into the array, rest of the logic lgtm — tsamridh86, Jan 26 '22 at 13:30
Does this answer your question? [How to add two values in javascript](https://stackoverflow.com/questions/12535285/how-to-add-two-values-in-javascript) — Heretic Monkey, Jan 26 '22 at 13:38
Since you're using `Number()` it's now a duplicate of [How to compute the sum and average of elements in an array?](https://stackoverflow.com/q/10359907/215552) — Heretic Monkey, Jan 26 '22 at 13:40

H_H · Answer 1 · 2022-01-26T13:42:12.840

0

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/

edited Jan 26 '22 at 13:42

answered Jan 26 '22 at 13:30

H_H

1,460
2
15
30

I've done that but how can I add the entered numbers. In the console.log they are displayed as several values. I just want to last one. – TomDev Jan 26 '22 at 13:32
just display the console.log out of the for loop @TomDev after the calculation is done – innocent Jan 26 '22 at 13:36
1

@TomDev added working demo - https://jsfiddle.net/La8z52rn/ – H_H Jan 26 '22 at 13:42

score 0 · Accepted Answer · answered Jan 26 '22 at 13:39

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>

score 0 · Answer 3 · answered Jan 26 '22 at 13:40

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>

how to add array elements instead of concatenating them as strings

3 Answers3