如何对被推入初始为空的数组的索引项求和？

Question

I want to find the sum of all numbers in an array. The numbers are being pushed into the array when the user clicks an image on the page. Do I need to use a for loop or something different since the array is continuously being updated?

I've tried using .reduce() and an arrow function with no success. The console is returning an error that there is no initial value in the array, so I put the number 0 in there, but the function won't include any of the numbers being pushed in.

//user clicks HTML element
$("#yellowcrystal").on('click', function () {

 //value of number must differ from the other clicked HTML elements
     if (yellowCrystalNum !== redCrystalNum && yellowCrystalNum !== 
     blueCrystalNum && yellowCrystalNum !== greenCrystalNum){
          crystals.push(yellowCrystalNum); 
     } else {
          yellowCrystalNum = Math.floor(Math.random() * 13) + 1;
     } 
});

//empty array to hold values 
var crystals = []

Answer 1

Maybe like this?

//user clicks HTML element
var crystals = []
var sum = 0;

$("#yellowcrystal").on('click', function () {

 //value of number must differ from the other clicked HTML elements
     if (yellowCrystalNum !== redCrystalNum && yellowCrystalNum !== 
     blueCrystalNum && yellowCrystalNum !== greenCrystalNum){
        crystals.push(yellowCrystalNum); 
        // use it here maybe
        sum = arrsum(crystals)
     } else {
          yellowCrystalNum = Math.floor(Math.random() * 13) + 1;
     } 
});

function arrsum(arr) {
    return arr.reduce(function(xs, x) {
        return xs + x
    }, 0)
}