计算一个数组的值和另一个数组中的 return 总数

Question

我正在创建一个项目，当我在其中单击“添加”按钮时，我将在第一个输入中输入的值添加到一个数组中。输入尽可能多的值后我想计算数组中的数字并将它们输入包含总数的数组中并在控制台中显示。

我能够获取输入值以添加到数组中，但之后无法计算它们。谁能告诉我该怎么办？

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>

JS

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

}  */

Answer 1

您可以使用 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>

计算一个数组的值和另一个数组中的 return 总数

Calculate value from an array and return total in another array

html

javascript

arrays

numbers

calculator