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!';
}
The reason for that you're giving your function (counter)
argument and it's actually nothing remove counter argument and it will work
let counter = 0;
document.getElementById("blue-circle").onclick = function() {
document.getElementById("blue-circle").style.display = "none";
counter++;
}
the onclick take the event as a parameter but you name it counter the same as the global variable that you used!
<script type="text/javascript">
let counter = 0;
const hiddenTxt = document.getElementById("hiddenTxt");
const redCircle = document.getElementById("red-circle");
redCircle.addEventListener('click', () => {
counter++;
redCircle.style.display = "none";
if (counter === 3) {
console.log('here 2');
hiddenTxt.innerHTML = 'You did it!';
}
})
const greenCircle = document.getElementById("green-circle");
greenCircle.addEventListener('click', () => {
counter++;
greenCircle.style.display = "none";
if (counter === 3) {
console.log('here 2');
hiddenTxt.innerHTML = 'You did it!';
}
})
const blueCircle = document.getElementById("blue-circle");
blueCircle.addEventListener('click', () => {
counter++;
blueCircle.style.display = "none";
if (counter === 3) {
console.log('here 2');
hiddenTxt.innerHTML = 'You did it!';
}
})
</script>
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>
<script type="text/javascript">
counter = 0;
function increment(callback) {
counter++;
callback();
if (counter === 3) {
console.log('here 2');
document.getElementById("hiddenTxt").innerHTML = 'You did it!';
}
}
document.getElementById("red-circle").onclick = () => increment(() => document.getElementById("red-circle").style.display = "none")
document.getElementById("green-circle").onclick = () => increment(() => document.getElementById("green-circle").style.display = "none")
document.getElementById("blue-circle").onclick = () => increment(() => document.getElementById("blue-circle").style.display = "none")
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.