How do I ge the values from input type="Text" and then average it using js?

user_13736928 0
Viewed 41

I want to get the average from input type="text". In the input type text, it has the format 1,2,3. When they click on the button it should alert them the average. Here is my code:

In the input type text in the snippet type in 1,2,3. Then you will see the problem. 

function averagevalue(){
var numberstouse = document.getElementById('average').value;
const average = array => array.reduce((a, b) => a + b) / array.length;
alert(average([numberstouse]));
}
<input type="text" id="average" value>
<button type="btn" onclick="averagevalue()">Avg</button>

But the problem is, as you can see in the snippet, it says the value NaN. But in the alert, I want to says the average. Any help is appreciated.

html javascript
3 Answers

Use Split to convert the input to an array

The split() method takes a pattern and divides a String into an ordered list of substrings by searching for the pattern, puts these substrings into an array, and returns the array.

function averagevalue(){
var numberstouse = document.getElementById('average').value;
const average = array => array.reduce((a, b) => Number(a) + Number(b)) / array.length;
alert(average(numberstouse.split(',')));
}
<input type="text" id="average" value=>
<button type="btn" onclick="averagevalue()">Avg</button>

user_31456900

The value is a comma seperated string. so we use the .split() method on it with, , as an argument to that method and that will return a list without the comma.

Edit : I forgot to convert the items in list to number. fixed !

function averagevalue(){
var numberstouse = document.getElementById('average').value;
numberstouse = numberstouse.split(',')
numberstouse = numberstouse.map(str => Number(str));
const average = array => array.reduce((a, b) => a + b) / array.length
alert(average(numberstouse));
}
<input type="text" id="average" value=>
<button type="btn" onclick="averagevalue()">Avg</button>

user_161538070

you need to pass the whole input and split it to make a new array, and its elements to floats you could use this instead :

function averagevalue(){
var numberstouse = document.getElementById('average').value;
const average = numberstouse =>
{
    let newArr = numberstouse.split(",");
    let val = newArr.reduce((a,b)=>parseFloat(a)+parseFloat(b)) / newArr.length;
    return val;
} 
alert(average(numberstouse));
}
user_133474450
Related