使用事件侦听器单击时更改 Img Src

Question

我正在创建一个剪刀石头布项目，但使用的是水火草口袋妖怪，而不是传统的剪刀石头布。当我单击选择的口袋妖怪“选择”时，我希望玩家“玩家口袋妖怪”图像切换来源，以便可以清楚地表明它是游戏中的选择。但是，当我尝试使用 currentSrc 执行此操作时，它不会在游戏中切换。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <title>Pokemon Battle</title>
  </head>
  <body>
    <div id="container">
      <h1 class="title">Pokemon Battle</h1>
      <div class="computer container" id="computer-container">
        <h2>Gym Leader Score</h2>
        <p class="computer-score">0</p>
        <img
          src="pokeball.jpeg"
          id="computer-pokemon"
          class="computer pokemon"
        />
      </div>
      <div class="player container">
        <img src="pokeball.jpeg" id="player-pokemon" class="player pokemon" />
        <p class="player-score">0</p>
        <h2>Trainer Score</h2>
      </div>
      <div class="party container" id="choices">
        <img src="fire.jpeg" id="fire" class="choice" />
        <img src="water.jpeg" id="water" class="choice" />
        <img src="grass.jpeg" id="grass" class="choice" />
      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

const choice = document.querySelectorAll(".choice");

const computerScore = document.querySelector(".computer-score");
const playerScore = document.querySelector(".player-score");

const computerChoice = document.getElementById("computer-pokemon");
let playerChoice = document.getElementById("player-pokemon");

let gymLeaderScore;
let trainerScore;

for (let i = 0; i < choice.length; i++) {
  choice[i].addEventListener("click", function () {
   
    // replace player pokeball with chosen pokemon
    var playerImg = choice[i].currentSrc;
    playerChoice.currentSrc = playerImg;
  });
}

我尝试使用循环来收集选择 currentSrc 并将其声明为变量 playerImg，然后使其等于 playerChoice.currentSrc 变量，它是 img 中选择的精灵球的元素。

Answer 1

试试这个

let choicesImg = document.querySelectorAll(".choice");
let imgOfPlayer = document.getElementById("player-pokemon")

choicesImg.forEach(img => {
    img.addEventListener('click', e => {
        imgOfPlayer.src = e.target.src
    })
})

// You can also do it in one line of code like this:
choicesImg.forEach(img => img.onclick = e => imgOfPlayer.src = e.target.src )

使用事件侦听器单击时更改 Img Src

Changing Img Src when clicked using event listener

html

javascript

image

src