JavaScript Arrays Issues With Values Being Convert to a NaN Outcome

Question

So I was making this code mostly for fun. Basically it allows the user to enter in the first four values in an array as well as a number that multiplies all of the values in an array by a given number. After that is done the program calls another function to either calculate what the middle number is in an odd array or it finds the average of the two middle numbers in an even array and return that value to the user. It is supposed to do this for the array before it is multiplied as well as to the array after it has been multiplied by the user's number. The code runs fine when it is used on the original array as well as on the modified array when the number of values is odd within the array. It runs into trouble however, when the modified array is even. For some reason instead of returning the average of the two middle numbers it gives NaN for the value. This only happens on the array after it is modified and I was wondering why that was? Here are two copies of my code. The first with an odd number in the array and the second has an even number. Any help would be appreciated. Thanks!

<!DOCTYPE HTML>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>Add Middle Array</title>

<script type="text/javascript">

function collectdata() {

var list = [0, 0, 0, 0, 5];

list[0] = parseFloat(document.getElementById("pokemon").value);
list[1] = parseFloat(document.getElementById("digimon").value);
list[2] = parseFloat(document.getElementById("transformers").value);
list[3] = parseFloat(document.getElementById("workers").value);

var multiply = parseFloat(document.getElementById("multi").value);

var outcome = multiplier(list, multiply);

var spaceoutcome = outcome;

for (i = 0; i < outcome.length; i++) {

spaceoutcome[i] = " " + spaceoutcome[i];
}

document.getElementById("output1").innerHTML = spaceoutcome;

var sumofmiddle = sum(list);

document.getElementById("output2").innerHTML = sumofmiddle;

var sumofmodmid = sum(outcome);


document.getElementById("output3").innerHTML = sumofmodmid;

}

function multiplier(L, M) {

var money = [];

for (i = 0; i < L.length; i++) {

money[i] = (L[i] * M);
}

return money;

}

function sum(L){
var outcome = 0;
if (L.length % 2 == 0) 
{
outcome = ((L[L.length / 2] + L[((L.length / 2) - 1)]) / 2);
}
else
{
outcome = L[((L.length - 1) / 2)];
}

return outcome;

}

</script>
</head>

<body>

Please enter in a list of four values to be muliplied with the final value always being 5. <br>

<input type="text" id="pokemon"><br>
<input type="text" id="digimon"><br>
<input type="text" id="transformers"><br>
<input type="text" id="workers"><br><br>

Please enter the multiplier.<br><br>

<input type="text" id="multi"><br><br>

<button type="button" onclick="collectdata()">Click here to multiply values</button>

<div id="output1"></div><br><br>

Bonus! Here is the average of the middle numbers of the arrays!<br>

<div id="output2"></div><br><br>

Final Surprise! Here is the average of the multiplied modified numbers!<br>

<div id="output3"></div>

</body>
</html>

Here is the even numbered array that is malfunctioning.

<!DOCTYPE HTML>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>Add Middle Array</title>

<script type="text/javascript">

function collectdata() {

var list = [0, 0, 0, 0, 5, 6];

list[0] = parseFloat(document.getElementById("pokemon").value);
list[1] = parseFloat(document.getElementById("digimon").value);
list[2] = parseFloat(document.getElementById("transformers").value);
list[3] = parseFloat(document.getElementById("workers").value);

var multiply = parseFloat(document.getElementById("multi").value);

var outcome = multiplier(list, multiply);

var spaceoutcome = outcome;

for (i = 0; i < outcome.length; i++) {

spaceoutcome[i] = " " + spaceoutcome[i];
}

document.getElementById("output1").innerHTML = spaceoutcome;

var sumofmiddle = sum(list);

document.getElementById("output2").innerHTML = sumofmiddle;

var sumofmodmid = sum(outcome);


document.getElementById("output3").innerHTML = sumofmodmid;

}

function multiplier(L, M) {

var money = [];

for (i = 0; i < L.length; i++) {

money[i] = (L[i] * M);
}

return money;

}

function sum(L){
var outcome = 0;
if (L.length % 2 == 0) 
{
outcome = ((L[L.length / 2] + L[((L.length / 2) - 1)]) / 2);
}
else
{
outcome = L[((L.length - 1) / 2)];
}

return outcome;

}

</script>
</head>

<body>

Please enter in a list of four values to be muliplied with the final value always being 5. <br>

<input type="text" id="pokemon"><br>
<input type="text" id="digimon"><br>
<input type="text" id="transformers"><br>
<input type="text" id="workers"><br><br>

Please enter the multiplier.<br><br>

<input type="text" id="multi"><br><br>

<button type="button" onclick="collectdata()">Click here to multiply values</button>

<div id="output1"></div><br><br>

Bonus! Here is the average of the middle numbers of the arrays!<br>

<div id="output2"></div><br><br>

Final Surprise! Here is the average of the multiplied modified numbers!<br>

<div id="output3"></div>

</body>
</html>

score 1 · Accepted Answer · answered Dec 20 '17 at 03:19

1

Your sum() function is currently evaluating strings instead of numbers. Convert them to integers or floats depending on the input you are expecting. I used parseInt() below:

function sum(L){
 var outcome = 0;
 if (L.length % 2 == 0) {
    console.log(L.length/2)
    var a = L[L.length / 2];
    var b = L[((L.length / 2) - 1)];
    outcome = ( ( parseInt(a) + parseInt(b) ) / 2 );
 } else {
    ...
 }
 return outcome;
}

answered Dec 20 '17 at 03:19

jkhedani

468
3
11

Thanks so much! Your example helped out a lot and led me to the right answer. I decided to use parseFloat instead as the the program often results in a fraction. I appreciate the help! – Kevin Elliott Dec 20 '17 at 03:28

Shalitha Suranga · Answer 2 · 2017-12-20T03:36:36.443

You need to use var spaceoutcome = outcome.slice(); because the when you are adding spaces to spaceoutcome original outcome array will be modified. Also use Math.floor() in indices.

Here is the code

<!DOCTYPE HTML>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>Add Middle Array</title>

<script type="text/javascript">

function collectdata() {

var list = [0, 0, 0, 0, 5, 6];

list[0] = parseFloat(document.getElementById("pokemon").value);
list[1] = parseFloat(document.getElementById("digimon").value);
list[2] = parseFloat(document.getElementById("transformers").value);
list[3] = parseFloat(document.getElementById("workers").value);

var multiply = parseFloat(document.getElementById("multi").value);

var outcome = multiplier(list, multiply);

var spaceoutcome = outcome.slice();

for (i = 0; i < outcome.length; i++) {

spaceoutcome[i] = " " + spaceoutcome[i];
}

document.getElementById("output1").innerHTML = spaceoutcome;

var sumofmiddle = sum(list);

document.getElementById("output2").innerHTML = sumofmiddle;

var sumofmodmid = sum(outcome);


document.getElementById("output3").innerHTML = sumofmodmid;

}

function multiplier(L, M) {

var money = [];

for (i = 0; i < L.length; i++) {

money[i] = (L[i] * M);
}

return money;

}

function sum(L){
var outcome = 0;
if (L.length % 2 == 0) 
{
outcome = (Math.floor(L[L.length / 2] + L[Math.floor((L.length / 2) - 1)]) / 2);
}
else
{
outcome = L[Math.floor((L.length - 1) / 2)];
}

return outcome;

}

</script>
</head>

<body>

Please enter in a list of four values to be muliplied with the final value always being 5. <br>

<input type="text" id="pokemon"><br>
<input type="text" id="digimon"><br>
<input type="text" id="transformers"><br>
<input type="text" id="workers"><br><br>

Please enter the multiplier.<br><br>

<input type="text" id="multi"><br><br>

<button type="button" onclick="collectdata()">Click here to multiply values</button>

<div id="output1"></div><br><br>

Bonus! Here is the average of the middle numbers of the arrays!<br>

<div id="output2"></div><br><br>

Final Surprise! Here is the average of the multiplied modified numbers!<br>

<div id="output3"></div>

</body>
</html>

I see. I had no idea that creating a new variable would modify the one it is based on. I thought that existing variables could only be modified by calling them and altering their contents. That's good to know. But why does the outcome variable change? I appreciate your help by the way, your code works great! — Kevin Elliott, Dec 20 '17 at 03:42
Usually when you are assigning another array to new array in js it copies to references not the data. see question [here](https://stackoverflow.com/questions/7486085/copying-array-by-value-in-javascript) — Shalitha Suranga, Dec 20 '17 at 03:47

score 1 · Answer 3 · answered Dec 20 '17 at 03:37

You had some syntax errors. Also, you cannot write this:

var someArray = []

and then do this:

someArray[1] = 'wrong';

You must use the .push() method to populate regular arrays.

Use this and try the snippet at the bottom:

function collectdata() 
{
  var list = [0, 0, 0, 0];

  list[0] = parseFloat(document.getElementById("pokemon").value);
  list[1] = parseFloat(document.getElementById("digimon").value);
  list[2] = parseFloat(document.getElementById("transformers").value);
  list[3] = parseFloat(document.getElementById("workers").value);

  var multiply = parseFloat(document.getElementById("multi").value);
  var outcome = multiplier(list, multiply);
  var spaceoutcome = outcome;

  for (i = 0; i < outcome.length; i++) spaceoutcome[i] = " " + spaceoutcome[i];

  document.getElementById("output1").innerHTML = spaceoutcome;

  var sumofmiddle = sum(list);
  document.getElementById("output2").innerHTML = sumofmiddle;

  var sumofmodmid = sum(outcome);
  document.getElementById("output3").innerHTML = sumofmodmid;

}

function multiplier(L, M)
{
  var money = [];
  
  for (i = 0; i < L.length; i++) money.push(parseFloat(L[i] * M));
  return money;
}

function sum(L)
{
  if (L.length % 2 == 0) return (parseFloat(L[L.length/2]) + parseFloat(L[L.length/2 -1]))/2;
  else return L[(L.length+1)/2 - 1];
}

<!DOCTYPE HTML>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>Add Middle Array</title>
</head>

<body>
Please enter in a list of four values to be muliplied with the final value always being 5.
<br/>

<input type="text" id="pokemon"><br>
<input type="text" id="digimon"><br>
<input type="text" id="transformers"><br>
<input type="text" id="workers"><br><br>

Please enter the multiplier.
<br><br>
<input type="text" id="multi">
<br><br>

<button type="button" onclick="collectdata()">Click here to multiply values</button>

<div id="output1"></div>
<br><br>

Bonus! Here is the average of the middle numbers of the arrays!<br>

<div id="output2"></div>
<br><br>

Final Surprise! Here is the average of the multiplied modified numbers!<br>

<div id="output3"></div>

</body>
</html>

I see. That would explain a lot! I guess that by doing it the way I did changed the contents of the array into a string. I will keep in mind that I need to use the .push() method to add values to the array. Thanks for the help! I wish I could select everyone's answer as correct they were all informative. I think I understand the problem now. — Kevin Elliott, Dec 21 '17 at 01:16
You can always upvote :) Yes, something strange happened somewhere in your code. I have retyped your code and fixed some typos. So, now everything should work. Glad you fixed your problem. Peace. — Ivan86, Dec 21 '17 at 01:27

JavaScript Arrays Issues With Values Being Convert to a NaN Outcome

3 Answers3