CODEWITHSUNDEEP
javascripthtml
Victor
Victor

Reputation: 41

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

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>

Upvotes: 0

Views: 97

Answers (4)

Delaney
Delaney

Reputation: 21

  1. First, you should declare the array and the total variables outside the function, so they aren't redeclared each time the function is called.
  2. 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}`;
    }
}

Upvotes: 0

TheWandererLee
TheWandererLee

Reputation: 1032

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

  1. Move array initialization outside of totalSpent()
  2. Only perform array.push(spent) one time, no loop needed
  3. 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>

Upvotes: 1

Julliano Osorio
Julliano Osorio

Reputation: 305

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}`;

}

Upvotes: 0

Thel-Rico
Thel-Rico

Reputation: 116

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}`;
})

Upvotes: 0

Related Questions