我怎样才能让我的石头，布和剪刀的JS游戏工作？

<div id="game">
  <h1>石头、布、剪刀</h1>
  <button id="rock">石头</button>
  <button id="paper">布</button>
  <button id="scissors">剪刀</button>
  <p id="result"></p>
</div>

#game {
  text-align: center;
}

button {
  margin: 10px;
  padding: 10px 20px;
  font-size: 16px;
}

#result {
  font-size: 20px;
  font-weight: bold;
}

// 获取按钮元素
var rockBtn = document.getElementById("rock");
var paperBtn = document.getElementById("paper");
var scissorsBtn = document.getElementById("scissors");

// 添加点击事件监听器
rockBtn.addEventListener("click", function() {
  playGame("rock");
});

paperBtn.addEventListener("click", function() {
  playGame("paper");
});

scissorsBtn.addEventListener("click", function() {
  playGame("scissors");
});

// 游戏逻辑处理函数
function playGame(userChoice) {
  // 生成电脑的选择
  var computerChoice = generateComputerChoice();

  // 比较用户和电脑的选择，判断胜负
  var result = compareChoices(userChoice, computerChoice);

  // 显示结果
  displayResult(result);
}

// 生成电脑的选择
function generateComputerChoice() {
  var choices = ["rock", "paper", "scissors"];
  var randomIndex = Math.floor(Math.random() * choices.length);
  return choices[randomIndex];
}

// 比较用户和电脑的选择，判断胜负
function compareChoices(userChoice, computerChoice) {
  if (userChoice === computerChoice) {
    return "平局";
  } else if (
    (userChoice === "rock" && computerChoice === "scissors") ||
    (userChoice === "paper" && computerChoice === "rock") ||
    (userChoice === "scissors" && computerChoice === "paper")
  ) {
    return "你赢了";
  } else {
    return "你输了";
  }
}

// 显示结果
function displayResult(result) {
  var resultElement = document.getElementById("result");
  resultElement.textContent = result;
}