addEventListener似乎没有将类添加到另一个元素

Question

我正在制作剪刀石头布游戏，并且功能checkUserChoice起作用。 连接到addEventListner时，函数assignRock不起作用。 但是如果我调用函数assignRock（）; 它确实有效。 不知道为什么“点击”似乎不起作用。

 const rockChoice = document.querySelector(".rockChoice"); const scissorsChoice = document.querySelector(".scissorsChoice"); const paperChoice = document.querySelector(".paperChoice"); const addIsRock = document.querySelector(".addIsRock"); function assignRock() { rockChoice.classList.add("isRock"); } addIsRock.addEventListener("click", assignRock); var userChoice; function checkUserChoice() { if (rockChoice.classList.contains("isRock")) { userChoice = "rock"; } else if (scissorsChoice.classList.contains("isScissors")) { userChoice = "scissors"; } else if (paperChoice.classList.contains("isPaper")) { userChoice = "paper"; } } checkUserChoice(); console.log('the user choice is ' + userChoice); 

 .rockChoice { font-size: 20px; } .scissorsChoice { font-size: 20px; } .paperChoice { font-size: 20px; } .addIsRock { font-size: 20px; } 

 <div class="rockChoice"><a href="#" class="addIsRock">Rock</a></div> <div class="scissorsChoice"><a href="#">Scissors</a></div> <div class="paperChoice"><a href="#">Paper</a></div> 

Answer 1

好的，所以我认为您的问题本质上是您希望事情以与当前正在运行的顺序不同的顺序运行（至少对于您的某些部分而言，这些根本不起作用）。 我希望我编写的代码可以使发生的事情更清楚，但如果不能，请告诉我。

 const rockChoice = document.querySelector(".rockChoice"); const scissorsChoice = document.querySelector(".scissorsChoice"); const paperChoice = document.querySelector(".paperChoice"); const addIsRock = document.querySelector(".addIsRock"); function assignRock() { rockChoice.classList.add("isRock"); } addIsRock.addEventListener("click", assignRock); function checkUserChoice() { var userChoice; if (rockChoice.classList.contains("isRock")) { userChoice = "rock"; } else if (scissorsChoice.classList.contains("isScissors")) { userChoice = "scissors"; } else if (paperChoice.classList.contains("isPaper")) { userChoice = "paper"; } return userChoice; } console.log('the user choice is ' + checkUserChoice()); //this happens when the page loads //Click the rock button here (within 10 seconds), so the click event takes setTimeout(function(){ console.log('the user choice is ' + checkUserChoice()); //this will log that the user choice is 'rock' }, 10000); 

 .rockChoice { font-size: 20px; } .scissorsChoice { font-size: 20px; } .paperChoice { font-size: 20px; } .addIsRock { font-size: 20px; } 

 <div class="rockChoice"><a href="#" class="addIsRock">Rock</a></div> <div class="scissorsChoice"><a href="#">Scissors</a></div> <div class="paperChoice"><a href="#">Paper</a></div> 

Answer 2

您还需要添加checkUserChoice（）作为事件，并将控制台日志移至该方法。 可以将rock分配为userChoice值，这只是您的反馈，可以查看未执行的更改。

 const rockChoice = document.querySelector(".rockChoice"); const scissorsChoice = document.querySelector(".scissorsChoice"); const paperChoice = document.querySelector(".paperChoice"); const addIsRock = document.querySelector(".addIsRock"); function assignRock() { rockChoice.classList.add("isRock"); } addIsRock.addEventListener("click", assignRock); var userChoice; function checkUserChoice() { if (rockChoice.classList.contains("isRock")) { userChoice = "rock"; } else if (scissorsChoice.classList.contains("isScissors")) { userChoice = "scissors"; } else if (paperChoice.classList.contains("isPaper")) { userChoice = "paper"; } //Moved into method so it's logged every time method is invoked console.log('the user choice is ' + userChoice); } //Add check as an event following the assign event addIsRock.addEventListener("click", checkUserChoice); 

 .rockChoice { font-size: 20px; } .scissorsChoice { font-size: 20px; } .paperChoice { font-size: 20px; } .addIsRock { font-size: 20px; } 

 <div class="rockChoice"><a href="#" class="addIsRock">Rock</a></div> <div class="scissorsChoice"><a href="#">Scissors</a></div> <div class="paperChoice"><a href="#">Paper</a></div>