Why is my variable not incrementing? JavaScript

February 16, 2022

Sorry if this is a stupid question, but I’m learning JavaScript and having difficulties. Why doesn’t this increment number when circle is pressed and gone? I tried adding return counter; but it did nothing.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Circles</title>
    <link rel="stylesheet" href="./styles.css">
</head>
<body>

    <div class="circle" id="red-circle"></div>
    <div class="circle" id="green-circle"></div>
    <div class="circle" id="blue-circle"></div>

    <div id="hiddenTxt">
        <p> </p>
    </div>

    <script type="text/javascript">
        let counter = 0;

        document.getElementById("red-circle").onclick = function (counter) {
            document.getElementById("red-circle").style.display = "none";
            counter++;
        }
        document.getElementById("green-circle").onclick = function (counter) {
            document.getElementById("green-circle").style.display = "none";
            counter++;
        }
        document.getElementById("blue-circle").onclick = function (counter) {
            document.getElementById("blue-circle").style.display = "none";
            counter++;
        }
        console.log('here 1');
        console.log(counter);

        if (counter === 3) {
            console.log('here 2');
            document.getElementById("hiddenTxt").innerHTML = 'You did it!';
        }

    </script>
</body>
</html>

I’ve been trying to fix this for an hour. I originally tried

        if (document.getElementById("red-circle").style.display === "none" &&
            document.getElementById("green-circle").style.display === "none" &&
             document.getElementById("blue-circle").style.display === "none") {

             console.log('here');
             document.getElementById("hiddenTxt").innerHTML = 'You did it!';
         }

>Solution :

This may be one possible implementation that achieves the objective:

let counter = 0;

document.getElementById("red-circle").onclick = function() {
  document.getElementById("red-circle").style.display = "none";
  counter++;
  showText();
}
document.getElementById("green-circle").onclick = function() {
  document.getElementById("green-circle").style.display = "none";
  counter++;
  showText();
}
document.getElementById("blue-circle").onclick = function() {
  document.getElementById("blue-circle").style.display = "none";
  counter++;
  showText();
}
const showText = () => {
  if (counter === 3) {
    console.log('here 2');
    document.getElementById("hiddenTxt").innerHTML = 'You did it!';
  }
};

.circle {
  border-radius: 50%;
  width: 10%;
  margin-bottom: 5%;
  text-align: center;
}

.red {
  border: 4px solid red;
}

.green {
  border: 4px solid green;
}

.blue {
  border: 4px solid blue;
}

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Circles</title>
  <link rel="stylesheet" href="./styles.css">
</head>

<body>
  <div class="circle red" id="red-circle">1</div>
  <div class="circle green" id="green-circle">2</div>
  <div class="circle blue" id="blue-circle">3</div>

  <div id="hiddenTxt"></div>

</body>

</html>

An alternative approach may be something like this

let counter = 0;

// Removed repeated statements and moved into 'handleClick' with parameter
const handleClick = clickedColor => {
  document.getElementById(clickedColor).style.display = "none";
  counter++;
  if (counter === 3) {
    document.getElementById("hiddenTxt").innerHTML = 'You did it!';
  }
};

// Removed individual onclick by using an array
['red-circle', 'green-circle', 'blue-circle'].forEach(
  colorOption => {
    document.getElementById(colorOption).onclick = () => handleClick(colorOption);
    }
);

.circle {
  border-radius: 50%;
  width: 10%;
  margin-bottom: 5%;
  text-align: center;
}

.red {
  border: 4px solid red;
}

.green {
  border: 4px solid green;
}

.blue {
  border: 4px solid blue;
}

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Circles</title>
  <link rel="stylesheet" href="./styles.css">
</head>

<body>
  <div class="circle red" id="red-circle">1</div>
  <div class="circle green" id="green-circle">2</div>
  <div class="circle blue" id="blue-circle">3</div>

  <div id="hiddenTxt"></div>

</body>

</html>