Adding sum of array with pushed input values

Question

I have pushed an input value to an empty array and converted it into a number. I am trying to add up the array and show the sum. But the whole array is shown and no addition has been done. I've included some of the code here but I'll also include the JS fiddle in case I forgot something important. I may be overthinking it as I have been looking at it for sometime. JS Fiddle: https://jsfiddle.net/nzart/emruz0sb/4/

// HTML
<h1>Sugar Counter:</h1><p id="total">--</p>

<div class="box bot1">
 <div class="twogrid mid">
  <label for="amount">Amount of Sugar</label>
  <input type="text" name="amount" id="amount">
 </div>    
</div>

//JS
var added = [];

//Get Data
var userInput = function(){
    return parseFloat(document.getElementById('amount').value);
}

// Store Data
var newSugar = function(){
    return added.push(userInput());
}

//Add total
function total() {
    var sum = 0;    
    for (var i = 0; i < added.length; i++) {
        sum += added[i];
    }
    document.getElementById('total').textContent = added;
}

Shouldn't the last line in total() be document.getElementById('total').textContent = sum;? You are using the array added itself instead of the sum — abhishekkannojia
– abhishekkannojia, Commented Mar 26, 2019 at 16:45
document.getElementById('total').textContent = sum instead of document.getElementById('total').textContent = added; — Code Maniac
– Code Maniac, Commented Mar 26, 2019 at 16:45

Ryan Wilson · Accepted Answer · 2019-03-26 16:45:41Z

1

This line is incorrect inside of function total():

 document.getElementById('total').textContent = added;

Change to this:

document.getElementById('total').textContent = sum;

Here is an updated fiddle: https://jsfiddle.net/bqt1mws7/

answered Mar 26, 2019 at 16:45

Ryan Wilson

10.9k3 gold badges23 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

nzart Over a year ago

Perfect! Thank you!

VerySeriousSoftwareEndeavours · Accepted Answer · 2019-03-26 16:44:58Z

0

You are displaying the array variable not the sum variable. Assign the sum variable to #total, not added variable.

document.getElementById('total').textContent = sum;

answered Mar 26, 2019 at 16:44

VerySeriousSoftwareEndeavours

1,7634 gold badges33 silver badges64 bronze badges

Comments

Mr. Polywhirl · Accepted Answer · 2019-03-26 16:49:23Z

You need a button to perform the summation to update the total.

The Array.prototype.reduce function is a easy way to total values inside of a list.

values.reduce((runningTotal, currentValue) => runningTotal + currentValue, initialValue)

var valueList = [];

document.getElementById('btn-add').addEventListener('click', onAddClick);

function onAddClick(e) {
  var value = getCurrentValue();
  if (isNaN(value)) {
    alert('Value is not a number!');
    return;
  }
  valueList.push(value);
  document.getElementById('total').textContent = getTotal();
}

function getCurrentValue() {
  return parseFloat(document.getElementById('amount').value.trim());
}

function getTotal() {
  return valueList.reduce((a, b) => a + b, 0); // Sum the values in the list
}

<h1>Sugar Counter:</h1>
<label>Total:</label>
<span id="total">--</span>
<div class="box bot1">
  <div class="twogrid mid">
    <label for="amount">Amount of Sugar</label>
    <input type="text" name="amount" id="amount">
    <input type="button" value="Add" id="btn-add" />
  </div>
</div>

Adnan Toky · Accepted Answer · 2019-03-26 16:53:54Z

0

There is no problem in the addition process. If the array is valid, the total() function will work well. But at the last statement of total() function, you put added variable as output. But it should be the value of sum variable.

function total() {
    var sum = 0;    
    for (var i = 0; i < added.length; i++) {
        sum += added[i];
    }
    document.getElementById('total').textContent = sum;
}

edited Mar 26, 2019 at 16:53

answered Mar 26, 2019 at 16:47

Adnan Toky

1,9532 gold badges14 silver badges20 bronze badges

Collectives™ on Stack Overflow

Adding sum of array with pushed input values

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related