Sum of all values inputted into the same array via a submit button

Question

I figured this next step would be simple but I've been pulling my hair out trying to figure it out. I am putting in an amount of money spent and inputting it via a submit button. As I am putting in multiple values (since I'm also making a list of what the money was spent on) I am trying to get a total of all the money spent, but I either get NaN or just nothing. In theory I am hoping that every time I would hit confirm, the amount of money in the text box would be added to the total for that day.

I've been trying to push the value in an array, then summing it with a for loop but perhaps I'm making this more complicated than it needs to be. Here's my code:

  function totalSpent() {
     var total= 0;
      var spent = document.getElementById("moneySpent").value;
      var array = [];
      // check if the entered value is number
      if (isNaN(Number(spent))) {
        alert("Numbers only");

      } else {
        var spent = parseInt(document.getElementById("moneySpent").value);
        for (var i=0; i<spent.length;++i){
          array.push(parseFloat(spent[i].value));
        }
        total = array.reduce(function(previousValue, currentValue, index, array){
          return previousValue + currentValue;
        });
        youSpent.innerHTML=`Total Spent Today: ${total}`;
      }
    }

    <input type="amount" size=25 Placeholder="How much did you spend?" 
    id="moneySpent">
    <input type="button" value="confirm" onClick="totalSpent()">
    <br>
    <h2 id="youSpent"> Total Spent Today: 
    </h2>

parseInt returns a number... you can't do .length on a number — freefaller
– freefaller, Commented Jun 28, 2019 at 14:02
total += +items[item] ... and then document.getElementById("totalSpent").textContent = "Total $"+total.toFixed(2) see your other question and delete this — mplungjan
– mplungjan, Commented Jun 28, 2019 at 14:06
I think you are confusing things, var spent is a single value yet you keep trying to loop through or access it like an array. you just want to push the value of moneySpent to your array then you would also need a second button for when the user is done entering values and is ready to sum them. — GifCo
– GifCo, Commented Jun 28, 2019 at 14:08

TheWandererLee · Accepted Answer · 2019-06-28 15:03:32Z

Here you are my friend, I've made minimal changes to make your code work:

Move array initialization outside of totalSpent()
Only perform array.push(spent) one time, no loop needed
Add an initial value of 0 to array.reduce

  var array = [];

function totalSpent() {
  var total= 0;
  var spent = document.getElementById("moneySpent").value;

  // check if the entered value is number
  if (isNaN(Number(spent))) {
    alert("Numbers only");
  } else {
    var spent = parseInt(document.getElementById("moneySpent").value);
    array.push(spent);
    total = array.reduce(function(previousValue, currentValue, index, array){
      return previousValue + currentValue;
    }, 0);
    youSpent.innerHTML=`Total Spent Today: ${total}`;
  }
}

<input type="amount" size=25 Placeholder="How much did you spend?" 
id="moneySpent">
<input type="button" value="confirm" onClick="totalSpent()">
<br>
<h2 id="youSpent"> Total Spent Today: 
</h2>

Thel-Rico · Accepted Answer · 2019-06-28 14:11:09Z

0

You have to declare your array out of the function otherwise, each time the function is called, you erased the old values

https://jsfiddle.net/c3L5q6pa/

var array = [];

function totalSpent() {
  var spent = parseFloat(document.getElementById("moneySpent").value);
  // check if the entered value is number
  if (isNaN(spent)) {
    return alert("Numbers only");
  }
  array.push(spent)
  const total = array.reduce((previous, current) => previous + current);
  youSpent.innerHTML=`Total Spent Today: ${total}`;
})

answered Jun 28, 2019 at 14:11

Thel-Rico

1167 bronze badges

Comments

Julliano Osorio · Accepted Answer · 2019-06-28 14:14:56Z

0

So, there are 2 things i saw, the first one:

var spent = parseInt(document.getElementById("moneySpent").value);

When you transform your string input value to "parseInt" you lost the String.length property, so your for() won't work.

Second, if you gonna sum all numbers, i dont see the need of push all values to one array then loop it and sum the number, you could do something like:

} else {
    total = 0;
    var spent = document.getElementById("moneySpent").value;
    for (var i=0; i<spent.length;++i) total += parseInt(spent[i]);
    youSpent.innerHTML=`Total Spent Today: ${total}`;

}

answered Jun 28, 2019 at 14:14

Julliano Osorio

3051 silver badge4 bronze badges

Comments

Delaney · Accepted Answer · 2019-06-28 15:29:53Z

First, you should declare the array and the total variables outside the function, so they aren't redeclared each time the function is called.
Next, here's my take at simplifying your function, according to how I understand your question:

<input type="amount" size=25 Placeholder="How much did you spend?" id="moneySpent">
<input type="button" value="confirm" onClick="totalSpent()">
<br>
<h2 id="youSpent"> Total Spent Today:

var total = 0;
var array = [];

function totalSpent() {
    var spent = document.getElementById("moneySpent").value;
    // check if the entered value is number
    if (isNaN(Number(spent))) {
        alert("Numbers only");
    } else {
        var spent = parseFloat(document.getElementById("moneySpent").value);
        array.push(spent);
        total += spent;
        document.getElementById('youSpent').innerHTML=`Total Spent Today: ${total}`;
    }
}

Collectives™ on Stack Overflow

Sum of all values inputted into the same array via a submit button

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related