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>