How do you sum multiple values gotten from inputs in javascript?

Question

This is part of a series of exercises I have been doing and it's the only one I haven't been able to complete (I'm a Javascript beginner). The exercise says to "Create an input, and a button, so that everytime a value is entered the total value is stored in a variable. Create another button, that when pressed shows the accumulated total."

I have tried this:

JavaScript:

function ex15Save(ex15Num){
    let num1 = document.getElementById("ex15Num");
    var ex15Num = num1;
    let ex15Storage;
    ex15Storage += ex15Num;
}

HTML:

<label>Number to store 
<input id="ex15Num" type="number"> </label>
<button onclick="ex15Save()">Save Total</button>
<button onclick="ex15Show()">Show total</button>
<p id="ex15Total"></p>

I know the code is not even close to being finished but it has gotten to a point where my brain can't comprehend how to store the sum of the values without overwriting the value of a variable.

Does this answer your question? [How get total sum from input box values using Javascript?](https://stackoverflow.com/questions/13540751/how-get-total-sum-from-input-box-values-using-javascript) — pilchard, May 26 '22 at 21:38
1) You need `num1.value` and not just `num1`, 2) If you put your variable declaration outside of the function, it will keep its value across invocations. — CherryDT, May 26 '22 at 21:38
also: [How to get sum of input values?](https://stackoverflow.com/questions/24745185/how-to-get-sum-of-input-values) — pilchard, May 26 '22 at 21:38

score 0 · Answer 1 · answered May 26 '22 at 21:42

There are a few things you need to do here, but the basic logic is thus:

Create a new variable (total), and add the value of the input to it every time the button is clicked. You'll notice the use of parseFloat() to ensure that the value can be added.

const input = document.getElementById('ex15Num');
const output = document.getElementById('ex15Total');
const saveButton = document.getElementById('ex15SaveButton');
const showButton = document.getElementById('ex15ShowButton');
let total = 0;

saveButton.addEventListener('click',  (e) => {
  e.preventDefault();
  const toAdd = parseFloat(input.value);
  
  if (!isNaN(toAdd)) {
    total+= toAdd;
    input.value = '';
  }
});

showButton.addEventListener('click', (e) => {
  e.preventDefault();
  output.innerText = total;
});

<label for="ex15Num">Number to store</label>
<input id="ex15Num" type="number">
<button id="ex15SaveButton">Save Total</button>
<button id="ex15ShowButton">Show total</button>

<p id="ex15Total"></p>

Also, avoid using intrusive event handlers, and instead bind your events with addEventListener.

Thanks a lot for taking your time to answer my question, even though this response falls out of my scope I have been able to acquire a bit more knowledge and I'm sure it'll help on the next exercises. I will talk to my teacher when he has some free time and I'll try to update this question with however I solve this. Again, thank you very much. — Losord, May 26 '22 at 21:52

Stefan Avramovic · Accepted Answer · 2022-05-26T21:58:47.710

0

/* Declare ex15Storage outside the function otherwise it will reset everytime the function is called */
let ex15Storage = 0;

function ex15Save(){
    let num1 = document.getElementById("ex15Num");
      /* the num1 is an object so you want the value from it..  also format the value to number
      Otherwise 0 + "123" = 0123 // num + string is numstring value 
      */ 
    let ex15Num = Number(num1.value);
    ex15Storage += ex15Num;
    console.log(ex15Storage)
}
function ex15Show(){
  document.getElementById("ex15Total").innerHTML = ex15Storage;
}

<label>Number to store 
<input id="ex15Num" type="number"> </label>
<button onclick="ex15Save()">Save Total</button>
<button onclick="ex15Show()">Show total</button>
  
  
<p id="ex15Total"></p>

edited May 26 '22 at 21:58

answered May 26 '22 at 21:47

Stefan Avramovic

1,365
2
11
20

Ok, I didn't even have to wait, this answer is correct, it worked wonderfully, it's very compact and I understood instantly what the error was when comparing with my code, thank you very much. – Losord May 26 '22 at 21:57
Please consider marking the answer as the correct one :) – Stefan Avramovic May 26 '22 at 22:00

score 0 · Answer 3 · answered Oct 22 '22 at 08:24

Try this simplified function

let inputEl = document.getElementById("number1");
let totalEl = document.getElementById("total");
let total = 0;

let sumx = function(...nums){
  return nums.reduce((a, b) => a + b, 0);
}

let addition = () => {
  total = sumx(total,parseInt(inputEl.value));
  totalEl.innerHTML = total;
}

<input value="0" type="text" id="number1">
<button onclick="addition()">ADD</button>
<h1 id="total">00</h1>

How do you sum multiple values gotten from inputs in javascript?

3 Answers3