javascript根據單擊的img更改img onclick

Question

我正在嘗試在按下img時使用onclick函數。 我想根據按下的小img來更改一個大而主要的img（“ mainPants”）。 我的代碼有問題-小img上的每一次“單擊”都會將主img更改為最后一個（紅色褲子）。

這是我的代碼：

<img  id="mainPants" src="images/bluePants.png">
<img class="img1" id="pBlack"  onclick="changeImage()" src="images/blackPants.png">
<img  class="img1" id="pPink" onclick="changeImage()" src="images/pinkPants.png">
<img class="img1" id="pRed" onclick="changeImage()" src="images/redPants.png">

        <script>
            function changeImage(){

                var blackPants = document.getElementById("pBlack");
                var pinkPants = document.getElementById("pPink");
                var redPants = document.getElementById("pRed");

                var newImg = document.getElementById('mainPants');

                    blackPants.addEventListener('onclick', function(){
                        newImg.src = "images/blackPantsBig.png";

                    }());

                    pinkPants.addEventListener('onclick', function(){
                        newImg.src = "images/pinkPantsBig.png";
                    }());

                    redPants.addEventListener('onclick', function(){
                        newImg.src = "images/redPantsBig.png";
                    }());


            };
        </script>

Answer 1

您每次點擊都會運行所有回調：

blackPants.addEventListener('onclick', function(){
    newImg.src = "images/blackPantsBig.png";
}()); // these "()" brackets run function right after it is created

您還將綁定兩次所有回調-第一次在HTML中使用onclick="changeImage()"屬性，在第二次中使用addEventListener 。 試試看：

<script>
  function changeImage(e) {
    var newImg = document.getElementById('mainPants');
    switch (e.target.id) {
      case 'pBlack':
        newImg.src = "images/blackPantsBig.png";
        break;
      case 'pPink':
        newImg.src = "images/pinkPantsBig.png";
        break;
      case 'pRed':
      default:
        newImg.src = "images/pinkPantsBig.png";
    }
  }
</script>

Answer 2

<img class="img1" id="pBlack"  onclick="changeImage(this)" src="images/blackPants.png">
<img  class="img1" id="pPink" onclick="changeImage(this)" src="images/pinkPants.png">
<img class="img1" id="pRed" onclick="changeImage(this)" src="images/redPants.png">

    <script>
      function changeImage(img) {
        var newImg = document.getElementById('mainPants');
        switch (img.id) {
          case 'pBlack':
            newImg.src = "images/blackPantsBig.png";
            break;
          case 'pPink':
            newImg.src = "images/pinkPantsBig.png";
            break;
          case 'pRed':
          default:
            newImg.src = "images/redPantsBig.png";
        }
      }
    </script>