javascript html css counter onload-event

onClick() doesn't work and counter stopped at specific number without adding it all up

var r, g, b, color1, color2, exclude_box;
var count = 0;

function changeColor() {
  r = Math.floor(Math.random() * 256);
  g = Math.floor(Math.random() * 256);
  b = Math.floor(Math.random() * 256);
  color1 = "rgb(" + r + " , " + g + " , " + b + ")";
  color2 =
    "rgb(" +
    Math.floor(Math.random() * 256) +
    " , " +
    Math.floor(Math.random() * 256) +
    " , " +
    Math.floor(Math.random() * 256) +
    ")";

  exclude_box = Math.floor(Math.random() * 9 + 1);

  for (var i = 1; i <= 9; i++) {
    if (i == exclude_box) {
      continue;
    } else {
      var box_id = "box" + i;
      document.getElementById(box_id).style.backgroundColor = color1;
    }

    document.getElementById("box" + exclude_box).style.backgroundColor = color2;
  }
}

function playGame() {
  const onClick = (event) => {
    var clicked = event.srcElement.id;
    if (clicked == "box" + exclude_box) {
      count++;
      document.getElementById("point").textContent = "Points :" + count;
      changeColor();
    } else {
      window.alert("Game Over");
      count = 0;
      document.getElementById("point").textContent = "Points :" + count;
      location.reload();
    }
  };
  var clickMe = document.getElementById("box" + exclude_box)
  clickMe.addEventListener("click", onClick);
}

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 50px;
  margin-left: 25%;
  margin-right: 25%;
}

.colorBox {
  width: 150px;
  height: 180px;
  border: 1px solid black;
  padding: 10px;
}

    <!DOCTYPE html>
<html>
    <head>
        <title>Color Box</title>
        <meta name="viewport" content="width=device-width; initial-scale=1.0" />
        <link rel="stylesheet" type="text/css" href="styles.css">
        <script type="text/javascript" src="homework.js"></script>
    </head>
    <body onload="changeColor()">
        <h1 style="text-align: center;">Color Game</h1>
        <h3 id="point" style="text-align: center;">Points: 0</h3>
        <h2 id="oddbox"></h2>
        <div class="grid-container">
            
            <div class="colorBox" id="box1" onClick="playGame()"> </div>
            <div class="colorBox" id="box2" onClick="playGame()"> </div>
            <div class="colorBox" id="box3" onClick="playGame()"> </div>
            <div class="colorBox" id="box4" onClick="playGame()"> </div>
            <div class="colorBox" id="box5" onClick="playGame()"> </div>
            <div class="colorBox" id="box6" onClick="playGame()"> </div>
            <div class="colorBox" id="box7" onClick="playGame()"> </div>
            <div class="colorBox" id="box8" onClick="playGame()"> </div>
            <div class="colorBox" id="box9" onClick="playGame()"> </div>

        </div>
        
    </body>
</html>

The idea of this color game is to choose the different color box from out of all 9 boxes, if the user chooses the odd color box, it gains one point, however, if the user fails to choose the odd color box, the program alerts "Game Over". In my program, the code works, however, in order to gain points for choosing odd color block, I happen to do click twice instead of one and after the points reached 7, it no longer adds up points and said it's Game Over even though I choose the odd color block

Solution

You don't need to add an event listener in the playGame() function. That's the function that runs when the user clicks on a box, so you should just put the check for whether it's the odd color box.

Also, event.srcElement is obsolete, you should use event.target.

var r, g, b, color1, color2, exclude_box;
var count = 0;

function playGame(event) {
  var clicked = event.target.id;
  if (clicked == "box" + exclude_box) {
    count++;
    document.getElementById("point").textContent = "Points :" + count;
    changeColor();
  } else {
    window.alert("Game Over");
    count = 0;
    document.getElementById("point").textContent = "Points :" + count;
    location.reload();
  }
}

function changeColor() {
  r = Math.floor(Math.random() * 256);
  g = Math.floor(Math.random() * 256);
  b = Math.floor(Math.random() * 256);
  color1 = "rgb(" + r + " , " + g + " , " + b + ")";
  color2 =
    "rgb(" +
    Math.floor(Math.random() * 256) +
    " , " +
    Math.floor(Math.random() * 256) +
    " , " +
    Math.floor(Math.random() * 256) +
    ")";

  exclude_box = Math.floor(Math.random() * 9 + 1);

  for (var i = 1; i <= 9; i++) {
    if (i == exclude_box) {
      continue;
    } else {
      var box_id = "box" + i;
      document.getElementById(box_id).style.backgroundColor = color1;
    }

    document.getElementById("box" + exclude_box).style.backgroundColor = color2;
  }
}

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 50px;
  margin-left: 25%;
  margin-right: 25%;
}

.colorBox {
  width: 150px;
  height: 180px;
  border: 1px solid black;
  padding: 10px;
}

<!DOCTYPE html>
<html>

<head>
  <title>Color Box</title>
  <meta name="viewport" content="width=device-width; initial-scale=1.0" />
  <link rel="stylesheet" type="text/css" href="styles.css">
  <script type="text/javascript" src="homework.js"></script>
</head>

<body onload="changeColor()">
  <h1 style="text-align: center;">Color Game</h1>
  <h3 id="point" style="text-align: center;">Points: 0</h3>
  <h2 id="oddbox"></h2>
  <div class="grid-container">

    <div class="colorBox" id="box1" onClick="playGame(event)"> </div>
    <div class="colorBox" id="box2" onClick="playGame(event)"> </div>
    <div class="colorBox" id="box3" onClick="playGame(event)"> </div>
    <div class="colorBox" id="box4" onClick="playGame(event)"> </div>
    <div class="colorBox" id="box5" onClick="playGame(event)"> </div>
    <div class="colorBox" id="box6" onClick="playGame(event)"> </div>
    <div class="colorBox" id="box7" onClick="playGame(event)"> </div>
    <div class="colorBox" id="box8" onClick="playGame(event)"> </div>
    <div class="colorBox" id="box9" onClick="playGame(event)"> </div>

  </div>

</body>

</html>