Calculate value from an array and return total in another array-CodePudding

I'm creating a project in which when I click on the Add button, I add the value entered in the first input to an array. After entering as many values as possible I would like to calculate the numbers in the array and enter them in an array containing the total and show it in the console.

I was able to get the input values to add to the array but can't calculate them afterwards. Can anyone kindly tell me how can I do?

HTML

<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="stile.css">
</head>
<body>

    <form>

        <div>
            <input type="number" id="importo">
        </div>

        <button type="submit" id="aggiungi">AGGIUNGI</button>

        <button type="submit" id="calcola">CALCOLA</button>
    </form>
    
    <script src="script.js"></script>
</body>

 const aggiungi = document.getElementById("aggiungi")

const calcola = document.getElementById("calcola")

const importazione = document.getElementById("importo")




const spese = []


console.log(importazione, motivazione)


aggiungi.onclick = function(e) {

e.preventDefault()

spese.push(Number(importazione.value))

console.log(importazione.value)

console.log(spese)
      
}





/* calcola.onclick = function (e) {

    e.preventDefault()

    let somma = 0

    let conti = []

    for (let i=0; i = spese.length; i  ) {
        
        conti = [somma  = spese[i]]

        console.log(conti)
      
    }

}  */

CodePudding user response：

You can use array.reduce:

The reduce() method executes a user-supplied "reducer" callback function on each element of the array, in order, passing in the return value from the calculation on the preceding element. The final result of running the reducer across all elements of the array is a single value.

The first time that the callback is run there is no "return value of the previous calculation". If supplied, an initial value may be used in its place. Otherwise the array element at index 0 is used as the initial value and iteration starts from the next element (index 1 instead of index 0).

const aggiungi = document.getElementById("aggiungi")

const calcola = document.getElementById("calcola")

const importazione = document.getElementById("importo")

const spese = []


console.log(importazione);


aggiungi.addEventListener("click", e => {
  spese.push(Number(importazione.value))

  console.log(importazione.value)

  console.log(spese)

});

calcola.addEventListener("click", () => {
  const result = spese.reduce((previousValue, currentValue) => previousValue   currentValue, 0);

  console.log(result);
});

<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="stile.css">
</head>

<body>

  <form>

    <div>
      <input type="number" id="importo">
    </div>

    <button type="button" id="aggiungi">AGGIUNGI</button>

    <button type="button" id="calcola">CALCOLA</button>
  </form>

  <script src="script.js"></script>
</body>

</html>