removeEventListenerが機能しないのはなぜですか？

私のjavascriptコード、事前に感謝しています（あなたもhtmlが必要だと私に知らせますが、タグは基本的にタグで、プレーヤーがちょうどクリックすると特定の数字に達するまでゲームが始まります。ゲームはすでに勝っされている場合はクリックしてから、他のプレイヤーを停止する：要求されたとしてremoveEventListenerが機能しないのはなぜですか？

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>

出典

2017-02-10 Hye Shusho

ur htmlも表示できますか？ – imudin07

'.removeEventListener（）'を取り巻く '**'はなぜですか？ – guest271314

ああ、私はちょうど太字にして、どこにあるのかを表示しようとしていました... –

は今

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>

それをチェック

出典

2017-02-10 06:36:42

最初のプレイヤーが5をヒットした後、2番目のプレーヤーはまだクリックし続けることができます。クリックすることができる人。 –

これで@HyeShushoを確認します。私はそれを編集した。 –

ありがとうございます！あなたは私になぜparseIntが必要なのかを私に説明することができますか？それは前にparseIntなしで動いていたと考えていますか？ –

あなたのonclick機能の1つでリスナーを削除しませんでした。

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()でリスナーを追加する必要があります。第一の人は、人のいずれかで、その後5をクリックし、回たら https://jsfiddle.net/1we2ydza/1/

出典

2017-02-10 06:42:16 imudin07

：ここ

function resetFunction() { 
... 
    document.querySelector(".playerOne").addEventListener("click", p1Function); 
    document.querySelector(".playerTwo").addEventListener("click", p2Function); 
}

はjsfiddleコードを働いていますハンドラーの場合、2人目のクリックハンドラーは削除されませんでした。したがって、2人はクリックできました。私は、あなたが 'p1Function（）'のクリックを取り除くのを忘れたと思う。 'p1Function（）'に以下の行を追加すると、問題が解決します。

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

出典

2017-02-10 06:53:02 Abhishek

いいえ、それは問題ではありませんでした。私は最初のものをテストしていたので、それを残しました。しかしどちらの方法でもうまくいきませんでした。私はまだそれが働いていないが、他の2人がそれを書いた方法、それが動作する方法はまだわからない。 –

あなたが投稿したコードを正確に使用しました。私のために、論理はpersonTwoのために何の問題もなくうまくいきました。上記の行を追加するpersonOneの場合は機能しました。 – Abhishek

これは非常に奇妙なことです...私は何度も試していましたが、どちらも私のために働くことはありませんでした。私もイベントリスナーを削除しようとしたものではありませんでした。 –

removeEventListenerが機能しないのはなぜですか？

答えて

関連する問題