Question

我正在使用 JavaScript 开发一个点球游戏。我给出了两个拍摄选项，它会在按下按钮时随机选择一个。如果 shot 为 1，则 span 标签的背景颜色变为绿色，否则应变为红色。我被困在更改标签的颜色。

var ButtonClick = () => {
  var shoot = score[Math.floor(Math.random() * score.length)];
  if (turn === 1) {
    team1.shoot.push(shoot);
    team1.total = calculateTotal(team1.shoot);
  } else {
    team2.shoot.push(shoot);
    team2.total = calculateTotal(team2.shoot);
  }
  updateButtonText();
  updateShoot();
}

var updateShoot = () => {
  var teamOne = document.getElementById("team-1-round-shoot").children;
  var teamTwo = document.getElementById("team-2-round-shoot").children;
  team1.shoot.forEach((shoot, index) => {
    shoot === 1 ? teamOne[index].style.background = "green" : teamOne[index].style.background = "red";
  })
  team2.shoot.forEach((shoot, index) => {
    shoot === 1 ? teamTwo[index].style.background = "green" :   teamTwo[index].style.background = "red";
  })
}

<div class="row">
  <div class="col container">
    <img class="img" src="/assets/Anguilla.png" alt="anguilla">
    <span class="name" id="team-1-name"></span>
    <div class="row" id="team-1-round-shoot">
      <span class="round"></span>
      <span class="round"></span>
      <span class="round"></span>
      <span class="round"></span>
      <span class="round"></span>
    </div>
  </div>
  <div class="col container">
    <img class="img" src="/assets/Armenia.png" alt="armenia">
    <span class="name" id="team-2-name"></span>
    <div class="row" id="team-2-round-shoot">
      <span class="round"></span>
      <span class="round"></span>
      <span class="round"></span>
      <span class="round"></span>
      <span class="round"></span>
    </div>
  </div>

Answer 1

您的代码中有语法错误。下面的代码两行都需要修改。

teamTwo[index].style.background - color = "red"

到

 teamTwo[index].style.background = "red"

或

teamTwo[index].style.backgroundColor = "red"

单击按钮更改背景

1 个答案: