Average numbers

Average numbers
0

#1

i am trying to calculate average of numbers which are comma seperated in text area, below is the code, please help to print average in text box “Average shipment cost”

``````function average(itemCost)
{

var total = 0;
var itemCost;
for(var i = 0; i < itemCost.length; i++) {
total += itemCost[i];
}
var avg = total / source.length;
document.getElementById("result").innerHTML = avg;
}

</script>

<h3> Average Shipment Cost Calculation</h3>

<form>

Shipping Item Cost <textarea type="text" rows="4" cols="50"name="source" id="itemCost"></textarea><br>

<input type="button" value="calculate" id="calculate" onClick="average()">
``````

#2

I’ve edited your post for readability. When you enter a code block into the forum, precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (`</>`) will also add backticks around text.

#3

#4
``````<p>
function average(itemCost)
{

var total = 0;
var itemCost;
for(var i = 0; i < itemCost.length; i++) {
total += itemCost[i];
}
var avg = total / source.length;
document.getElementById("result").innerHTML = avg;
}

</script>

<h3> Average Shipment Cost Calculation</h3>

<form>

Shipping Item Cost <textarea type="text" rows="4" cols="50"name="source" id="itemCost"></textarea><br>

<input type="button" value="calculate" id="calculate" onClick="average()">
<br>
Average shipment cost <input type="text" name="result" id="result"><br>

</form>
<p> <span id = "ship"></span> </p>
</p>
``````

#5

Here another way to do it only if you are in full control of what data is entered into the textarea. Eval function is tricky.

#6

Your code is still incomplete. No opening `script` tag. And you have `p` tags wrapping the whole thing?

And your code needs to be surrounded by three backticks, the key to the left of the “1” key.

#7

i dont understand this form, provided the screenshot still bother about tags and all

#8

sorry my bad, unable to understand. Below is the code

``````<script langauge="javascript" type="text/javascript">

function average(itemCost)
{

var total = 0;
var itemCost;
for(var i = 0; i < itemCost.length; i++) {
total += itemCost[i];
}
var avg = total / source.length;
document.getElementById("result").innerHTML = avg;
}

</script>

<h3> Average Shipment Cost Calculation</h3>

<form>

Shipping Item Cost <textarea type="text" rows="4" cols="50"name="source" id="itemCost"></textarea><br>

<input type="button" value="calculate" id="calculate" onClick="average()">
<br>
Average shipment cost <input type="text" name="result" id="result"><br>

</form>
<p> <span id = "ship"></span> </p>

</body>

</html>
``````

#9

#10

Based on your above code, I see a couple of issues. First, your onclick event calls a function called average, but does not pass a value as the itemCost argument which the function references in the for loop and other times. itemCost should be an array, so you can use the for loop code you have written. How can you make itemCost an array containing the values in the textarea element with id=“itemCost”? You need to reference the value property of that element and then use the split function to split the string into separate values (the ones separated by commas in your example). I will let you figure out how to use the split function.

Another problem in your current code is the use of a variable called source. in the avg formula shown below:

``````var avg = total / source.length;
``````

You have not defined a variable anywhere in your code named source, so why would you attempt to reference a length property for it?

#11

``````<script langauge="javascript" type="text/javascript">

function average(itemCost)
{

var total = 0;
var itemCost;
for(var i = 0; i < itemCost.length; i++) {
total += itemCost[i];
}
var avg = total / itemCost.length;
document.getElementById("result").innerHTML = avg;
}

</script>

<h3> Average Shipment Cost Calculation</h3>

<form>

Shipping Item Cost <textarea type="text" rows="4" cols="50"name="source" id="itemCost"></textarea><br>

<input type="button" value="calculate" id="calculate" onClick="average(itemCost)">
<br>
Average shipment cost <input type="text" name="result" id="result"><br>

</form>
<p> <span id = "ship"></span> </p>

</body>

</html>
``````

#12

You need to read what I wrote again, because you did not do what I said. itemCost needs to be an array, so you can loop through it. I explained how to do that. If you are still having trouble, I think your basic JavaScripts skills would be greatly enhanced by going through the Basic JavaScript section of Free Code Camp.

#13

espounding further @RandellDawson’s comments, your average script could look something like the below, the averaging part works fine, it’s your interaction with the DOM that is causing you problems see comments for explanation

``````function average(itemCost)
{
itemCost = itemCost.value //item cost is still an HTML element so you must first get the value of the element
.split(",") // convert text into array of costs
.map((i)=>Number(i)) // elements of array are still strings, must convert to numbers
var total = 0;
for(var i = 0; i < itemCost.length; i++) {
total += itemCost[i];
}
var avg = total / itemCost.length;