I have repeatedly attempted to use a mousedown listener for this memory game, but it won't work.

Also, I feel there is a way to do the game with my layout of the game itself.

async function eachRounds() {
  for (let i = 0; i < rounds; i++) {
    for (let j = 0; j <= i; j++) {
      let currentStatus = document.getElementById("status");
      currentStatus.innerHTML = "Round " + (counter + 1) + " out of " + rounds;
      let random = Math.floor(Math.random() * array.length);
      await flash(array[random]);
      await revert();
      let prompted = await colorClicked();
      if (prompted == array[random]) {
        currentStatus.innerHTML = "On to the next round!";
        if (j == rounds && sequence[rounds - 1] == colorClicked()) {
          currentStatus.innerHTML = "Congratulations! You win!";
          gameOn = false;
        }
      } else {
        currentStatus.innerHTML = "Sorry! You lose!";
        gameOn = false;
      }
    }
  }
}

That is the game layout itself. gameOn is a global boolean variable that sets to true when the game starts in another method.

array is the list of colors, and sequence is the list of the ordered colors the users must replicate by clicking.

The event listener for making the colored panels act as "buttons" is listed down below.

async function colorClicked() {
  red.addEventListener("mousedown", async function () {
    await flash(red);
    await revert();
    return red;
  });
  blue.addEventListener("mousedown", async function () {
    await flash(blue);
    await revert();
    return blue;
  });
  green.addEventListener("mousedown", async function () {
    await flash(green);
    await revert();
    return green;
  });
  yellow.addEventListener("mousedown", async function () {
    await flash(yellow);
    await revert();
    return yellow;
  });
}