为什么我的removeEventListener不起作用?

时间:2017-02-10 06:12:52

标签: javascript addeventlistener

我的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>

3 个答案:

答案 0 :(得分:1)

您没有删除其中一个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/

答案 1 :(得分:0)

立即检查

var player1Score=0;
var player2Score=0;

function p1Function(){

if(player1Score==parseInt(document.querySelector("input").value)){
   document.querySelector(".playerTwo").removeEventListener("click",    
    p2Function);
   return;
 }

++player1Score;
document.querySelector("#pOneScore").innerHTML=player1Score.toString();

if(player1Score==document.querySelector("input").value)
    document.querySelector("#pOneScore").style.color="green";
}

function p2Function(){

if(player2Score==parseInt(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(".playerOne").addEventListener("click", p1Function);
    document.querySelector(".playerTwo").addEventListener("click", p2Function);

    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);
<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" />
<button class="playerOne">Player One</button>
<button class="playerTwo">Player Two</button>
<button class="reset">Reset</button>

<script src="scorekeeper_js"></script>
</body>

答案 2 :(得分:0)

一旦第一个人点击了5次,那么在一个人处理器中,第二个人的点击处理程序就没有被删除。因此,两个人能够点击。我想你错过了删除'p1Function()'中的点击。在'p1Function()'中添加以下行可以解决您的问题:

import glob
print glob.glob("E:\\Logs\\Filename.*")