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

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.

CodePudding user response：

/* 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>

CodePudding user response：

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.