![](/img/trans.png)
[英]How do i toggle something on click using an event listener if condition is met?
[英]How do I disable the click event once a certain condition is met?
我正在制作石頭、紙、剪刀游戲。 當“You Score”或“Computer Score”達到 3 時,我希望禁用單擊事件。 我不確定是否需要禁用“搖滾”按鈕或刪除點擊事件。 無論哪種方式,當分數達到 3 時,我不再希望“搖滾”按鈕可點擊,這意味着我不希望任何一個分數在達到 3 后變得更高。
function computerPlay(){
let values = ['Rock', 'Paper', 'Scissors'],
valueToUse = values [Math.floor(Math.random()* values.length)];
return valueToUse;
};
const rock = document.querySelector('#rock');
let player = document.querySelector('.playerScore', playerScore = 0);
let computer = document.querySelector('.computerScore', computerScore = 0);
let finalResult = document.querySelector('.finalResult');
rock.addEventListener('click', function() {
let comp = computerPlay()
if (comp === 'Rock') {
computer.textContent = `Computer Score: ${computerScore +=0}`
player.textContent = `Your Score: ${playerScore +=0}`
} else if (comp === 'Paper') {
computer.textContent = `Computer Score: ${computerScore +=1}`
player.textContent = `Your Score: ${playerScore +=0}`
} else if (comp === 'Scissors') {
computer.textContent = `Computer Score: ${computerScore +=0}`
player.textContent = `Your Score: ${playerScore +=1}`
}
if (playerScore === 3){
finalResult.textContent = "You Won";
}
else if (computerScore === 3){
finalResult.textContent = "You Lost";
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My javascript</title>
<link rel="stylesheet" href="javascript.css">
</head>
<body>
<main>
<div class="wrapper">
<h1>Rock, Paper, Scissors!</h1>
<h2 id="choose">Choose:</h2>
</div>
<div class="container">
<img id="rock" src="https://static.thenounproject.com/png/477914-200.png">
</button>
</div>
<div class="wrapper">
<p class='computerScore'></p>
<p class='playerScore'></p>
</div>
<div class="wrapper">
<p class='finalResult'></p>
</div>
</main>
<script src="javascript.js"></script>
</html>
您可以命名您的回調(在外部聲明您的回調),以便稍后能夠調用removeEventListener
。
例如:
// ...
rock.addEventListener("click", onClick);
function onClick() {
let comp = computerPlay();
if (comp === "Rock") {
computer.textContent = `Computer Score: ${(computerScore += 0)}`;
player.textContent = `Your Score: ${(playerScore += 0)}`;
} else if (comp === "Paper") {
computer.textContent = `Computer Score: ${(computerScore += 1)}`;
player.textContent = `Your Score: ${(playerScore += 0)}`;
} else if (comp === "Scissors") {
computer.textContent = `Computer Score: ${(computerScore += 0)}`;
player.textContent = `Your Score: ${(playerScore += 1)}`;
}
if (playerScore === 3) {
finalResult.textContent = "You Won";
// Here I remove the event listener:
rock.removeEventListener("click", onClick);
} else if (computerScore === 3) {
finalResult.textContent = "You Lost";
// Same here
rock.removeEventListener("click", onClick);
}
}
// ...
正如@Antoine 所提到的,使用removeEventListener
將回調與您的點擊事件分離。 添加此答案只是為了展示這一點。
function computerPlay(){ let values = ['Rock', 'Paper', 'Scissors'], valueToUse = values [Math.floor(Math.random()* values.length)]; return valueToUse; }; const rock = document.querySelector('#rock'); let player = document.querySelector('.playerScore', playerScore = 0); let computer = document.querySelector('.computerScore', computerScore = 0); let finalResult = document.querySelector('.finalResult'); rock.addEventListener('click', choose); function choose() { let comp = computerPlay() if (comp === 'Rock') { computer.textContent = `Computer Score: ${computerScore +=0}` player.textContent = `Your Score: ${playerScore +=0}` } else if (comp === 'Paper') { computer.textContent = `Computer Score: ${computerScore +=1}` player.textContent = `Your Score: ${playerScore +=0}` } else if (comp === 'Scissors') { computer.textContent = `Computer Score: ${computerScore +=0}` player.textContent = `Your Score: ${playerScore +=1}` } if (playerScore === 3){ finalResult.textContent = "You Won"; rock.removeEventListener("click", choose); } else if (computerScore === 3){ finalResult.textContent = "You Lost"; rock.removeEventListener("click", choose); } }
<html> <head> <meta charset="utf-8"> <title>My javascript</title> <link rel="stylesheet" href="javascript.css"> </head> <body> <main> <div class="wrapper"> <h1>Rock, Paper, Scissors!</h1> <h2 id="choose">Choose:</h2> </div> <div class="container"> <img id="rock" src="https://static.thenounproject.com/png/477914-200.png"> </button> </div> <div class="wrapper"> <p class='computerScore'></p> <p class='playerScore'></p> </div> <div class="wrapper"> <p class='finalResult'></p> </div> </main> </html>
您可以使用 CSS 輕松做到這一點。 指針事件是幫助啟用和禁用指針事件的 css 屬性。
例如
If(condition) {
// for disable
document.getElementById('id').style.pointerEvent = 'none';
else {
for enable
document.getElementById('id').style.pointerEvent = 'auto';
}
訪問此鏈接了解更多信息https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.