JavaScript: How to store, update, and calculate the average and total number of values in a set of user-generated times in seconds

Question

This is a reaction tester project I've been working on that shows you how fast you click a box or circle that appears randomly.

What I'm having trouble adding are two features: The ability to show the user how many attempts they've made, and their average speed based on the sum of all times of their tries in seconds divided by their current total number of tries.

I've thought of a couple of different ways to get the number of tries: either counting the number of times the box appears, or since the best way to record the seconds from each try seems to be to push those seconds into an array and sum them; getting the length of that array would also give the number of tries.

The two places I'm stuck at are in trying to get the times to be stored into an array and summing them; plus getting the number of tries and dividing that sum.

I've thought and worked on this at length, and any of my attempts that didn't yield the desired result will likely be confusing.

Here's the code that works:

    createdTime=Date.now();
        }, time);
        }
        document.getElementById("box").onclick=function() 
    {
        clickedTime=Date.now();
        reactionTime=(clickedTime-createdTime)/1000;
        /*I'm trying to take make an array of reaction 
    times. 
        here is my last attempt:
            recordTime = [];
            sumTime = recordTime.push(reactionTime);
            console.log(recordtime);  
    

It only shows recordTime array once in the console as [undefined], and does not update the array with new reaction times. What I would expect/ am going for is something like:

 first try/iteration>>box appears>>User Clicks>>reactionTime is measured and calculated>>recordTime: recordTime = [0.530]; 
second try/iteration>>box appears>>User Clicks>>reactionTime is measured and calculated>>recordTime: recordTime = [0.530, 0.511];
third try/iteration>>box appears>>User Clicks>>reactionTime is measured and calculated>>recordTime: recordTime = [0.530, 0.511, 0.353];
fourth try/iteration>>box appears>>User Clicks>>reactionTime is measured and calculated>>recordTime: recordTime = [0.530, 
 0.511, 0.353,...];  

followed by:

  sum(recordTime)/(recordTime.length);
  (put recordTime result into innerHTML for desired element 
  id.)
  (same for recordTime.length).

I've tried putting it both inside and outside of the code above it, and none of my attempts have allowed me to add the seconds from reactionTime to an array.

Another option would be to add a "total seconds" span or element on the HTML page, and simply add the current time to the total time. however, this still has me in much the same situation as to both how to make the javaScript "remember" previous times, how to count the number of tries, and how to average them.

Thanks to A_A for the answer to my question. All I needed was a const Array=[0]; to store the values a user generated on a click. Thanks, A_A!

Answer 1

If you want to add an element to an array, you should not initialize it again (reactionTimes = []) as this will make it empty. Therefore initialize it in the beginning, and then call push on it.

const reactionTimes = [];
let startingTime;

function start() {
  startingTime = Date.now();
}

function stop() {
  const reactionTime = Date.now() - startingTime;
  reactionTimes.push(reactionTime);
  console.log(reactionTimes);
}

<button id="start" onclick=start()>Start</button>
<button id="stop" onclick=stop()>Stop</button>