為什么我的變量沒有遞增？ 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.