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
– UnholySheep, Commented Jan 26, 2022 at 13:26
it seems to work but it gives me three numbers and I want just the final one — TomDev
– TomDev, Commented Jan 26, 2022 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
– tsamridh86, Commented Jan 26, 2022 at 13:30
Does this answer your question? How to add two values in javascript — Heretic Monkey
– Heretic Monkey, Commented Jan 26, 2022 at 13:38

Sojin Antony · Accepted Answer · 2022-01-26 13:39:43Z

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>

Patrick Ferreira · Accepted Answer · 2022-01-26 13:40:42Z

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>

H_H · Accepted Answer · 2022-01-26 13:42:12Z

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, 2022 at 13:42

answered Jan 26, 2022 at 13:30

H_H

1,6304 gold badges19 silver badges34 bronze badges

3 Comments

TomDev Over a year ago

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.

innocent Over a year ago

just display the console.log out of the for loop @TomDev after the calculation is done

H_H Over a year ago

@TomDev added working demo - jsfiddle.net/La8z52rn

Collectives™ on Stack Overflow

how to add array elements instead of concatenating them as strings

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related