为什么我的变量没有递增？ JavaScript
[英]Why is my variable not incrementing? JavaScript
问题描述
抱歉，如果这是一个愚蠢的问题，但我正在学习 JavaScript 并且遇到困难。 为什么当圆圈被按下并消失时这个数字不增加？ 我尝试添加return counter; 但它什么也没做。
<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>
我已经尝试解决这个问题一个小时了。 我最初尝试过
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!';
}
4 个解决方案
解决方案1
0 2022-02-16 17:13:20
你给出你的function (counter)论点的原因实际上没有什么删除反论点并且它会起作用
let counter = 0;
document.getElementById("blue-circle").onclick = function() {
document.getElementById("blue-circle").style.display = "none";
counter++;
}
解决方案2
0 2022-02-16 17:16:08
onclick 将事件作为参数，但您将其命名为与您使用的全局变量相同的计数器！
<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>
解决方案3
0 已采纳 2022-02-16 17:23:22
这可能是实现目标的一种可能实现：
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>
另一种方法可能是这样的
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>
解决方案4
0 2022-02-17 03:42:26
<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>
为什么我的变量没有增加？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.