我的javascript代码，提前谢谢(如果您也需要html，请告诉我，但它基本上是标签，这是一个游戏，玩家只需点击直到达到一定数量，谁先到达谁就获胜。我是如果游戏已经获胜，则尝试阻止其他玩家点击:
var player1Score=0;
var player2Score=0;
function p1Function(){
if(player1Score==document.querySelector("input").value)
return;
++player1Score;
document.querySelector("#pOneScore").innerHTML=player1Score.toString();
if(player1Score==document.querySelector("input").value)
document.querySelector("#pOneScore").style.color="green";
}
function p2Function(){
if(player2Score==document.querySelector("input").value)
{
document.querySelector(".playerOne").removeEventListener("click",
p1Function);
return;
}
player2Score++;
document.querySelector("#pTwoScore").innerHTML=player2Score.toString();
if(player2Score==document.querySelector("input").value)
document.querySelector("#pTwoScore").style.color="green";
}
function resetFunction(){
document.querySelector("input").value=5;
document.querySelector("#pOneScore").style.color="black";
document.querySelector("#pTwoScore").style.color="black";
player1Score=0;
player2Score=0;
document.querySelector("#pOneScore").innerHTML=player1Score.toString();
document.querySelector("#pTwoScore").innerHTML=player2Score.toString();
}
document.querySelector(".playerOne").addEventListener("click", p1Function);
document.querySelector(".playerTwo").addEventListener("click", p2Function);
document.querySelector(".reset").addEventListener("click", resetFunction);
以下是请求的 HTML 代码:
<body>
<strong><span id="pOneScore">0</span> to <span id="pTwoScore">0</span>
</strong>
<br>
<br>
<p>Playing To:</p> <span id="playing_to"></span>
<input type="text" name="score" value="5"></input>
<button class="playerOne">Player One</button>
<button class="playerTwo">Player Two</button>
<button class="reset">Reset</button>
<script src="scorekeeper_js"></script>
</body>
最佳答案
您没有在 onclick 函数之一中删除监听器。
function p1Function() {
var maxScore = document.querySelector("input").value;
player1Score++;
if (player1Score == maxScore) {
document.querySelector("#pOneScore").style.color = "green";
document.querySelector(".playerTwo").removeEventListener("click",
p2Function);
document.querySelector("#pOneScore").innerHTML = player1Score.toString();
} else if (player1Score < maxScore) {
document.querySelector("#pOneScore").style.color = "black";
document.querySelector("#pOneScore").innerHTML = player1Score.toString();
}
}
function p2Function() {
var maxScore = document.querySelector("input").value;
player2Score++;
if (player2Score == maxScore) {
document.querySelector("#pTwoScore").style.color = "green";
document.querySelector(".playerOne").removeEventListener("click",
p1Function);
document.querySelector("#pTwoScore").innerHTML = player2Score.toString();
} else if (player2Score < maxScore) {
document.querySelector("#pTwoScore").style.color = "black";
document.querySelector("#pTwoScore").innerHTML = player2Score.toString();
}
}
您还必须在 reset() 中添加监听器:
function resetFunction() {
...
document.querySelector(".playerOne").addEventListener("click", p1Function);
document.querySelector(".playerTwo").addEventListener("click", p2Function);
}
这是有效的 jsfiddle 代码: https://jsfiddle.net/1we2ydza/1/
关于javascript - 为什么我的removeEventListener 不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42152644/