JS DOM:如何停止触发点击事件?

查尔斯·派恩

我正在尝试让我的按钮在满足特定条件时停止工作。出于某种原因,只要我在任何一方获得5分,它就一直在前进,甚至不显示分数,我也不知道为什么。我尝试过使用while循环,但是它一直崩溃。是否有简单的方法像jQuery中那样将其关闭?

const rock = document.querySelector('.rock');
const paper = document.querySelector('.paper');
const scissors = document.querySelector('.scissors');
const h3 = document.querySelector('h3');
const pscore = document.querySelector('#pscore');
const cscore = document.querySelector('#cscore');
let computerScore = 0;
let playerScore = 0;

function computerPlay() {
    var choice = Math.floor(Math.random() * 3 ) + 1; //generate a number 1-3 to find computer choice
    if(choice == 1) {
        return 'rock';
    }
    else if(choice == 2) {
        return 'paper';
    }
    else {
        return 'scissors'

    }
} 

let result; // simpler way of rewriting code?

    rock.addEventListener('click', () => {
        if(computerPlay() == 'rock') {
            result = `The computer chose rock and you chose rock! It's a tie! No change in score.`;
            h3.textContent = result;
            
        }
        else if(computerPlay() == 'paper') {
            result = `The computer chose paper and you chose rock! You lose! Computer Score +1!`;
            h3.textContent = result;
            computerScore++;
            cscore.textContent = computerScore;

     
        }
        else {
            result = `The computer chose scissors and you chose rock! You win! Player Score +1!`; 
            h3.textContent = result;
            playerScore++;
            pscore.textContent = playerScore;

        }
    });

    let playerPaper = paper.addEventListener('click', () => {
        if(computerPlay() == 'paper') {
            result = `The computer chose paper and you chose paper! It's a tie!`;
            h3.textContent = result;    
        }
        else if(computerPlay() == 'scissors') {
            result = `The computer chose scissors and you chose paper! You lose!`;
            h3.textContent = result;
            computerScore++;
            cscore.textContent = computerScore;
        }
        else {
            result = `The computer chose rock and you chose paper! You win!`; 
            h3.textContent = result;
            playerScore++;
            pscore.textContent = playerScore;
        }
        
    });

    let playerScissors = scissors.addEventListener('click', () => {
        if(computerPlay() == 'scissors') {
            result = `The computer chose scissors and you chose scissors! It's a tie!`;
            h3.textContent = result;    
        }
        else if(computerPlay() == 'rock') {
            result = `The computer chose rock and you chose scissors! You lose!`;
            h3.textContent = result;
            computerScore++;
            cscore.textContent = computerScore;
        }
        else {
            result = `The computer chose paper and you chose scissors! You win!`; 
            h3.textContent = result;
            playerScore++;
            pscore.textContent = playerScore;
        }
    })

function playGame(computerChoice) {
    computerChoice = computerPlay();
    if(playerScore == 5) {
        h3.textContent = `The score is 5 to ${computerScore}! You win!`;
    }
    else if(computerScore == 5) {
        h3.textContent = `The score is 5 to ${playerScore}! The computer wins!`;
    }
    
}

除“最终游戏”功能外,其他所有功能均正常运行。在此先感谢您提供的所有帮助或批评!

麦克斯韦·阿彻

如何禁用“点击”事件

评论中的人对如何改进游戏有一些绝妙的想法。我建议调查一下。虽然,如果要防止单击事件,可以通过多种方法来实现。

1.将禁用的属性添加到您的按钮。

window.onload = () => {
  const button = document.getElementById("myClicker")
  button.disabled = true
}
<button id="myClicker">Click</button>

2.添加CSS属性的指针事件:none;

window.onload = () => {
  const button = document.getElementById("myClicker")
  button.addEventListener("click",function(){console.log("hi")})
  button.style.pointerEvents = "none";
}
<button id="myClicker">Click</button>

第二种方法适用于不需要向用户指示按钮不再可交互的情况。

3.阻止默认事件。

window.onload = () => {
  const button = document.getElementById("myClicker")
  button.addEventListener("click",function(e){
    e.preventDefault;
  })
}
<button id="myClicker">Click</button>

4.删除事件监听器。

document.getElementById("yourButtonId").removeEventListener("Click", yourFunctinoNameHere);

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章