如何使用onclick事件單擊一個圖像，並在同一網頁上更改另一個圖像？

Question

用戶應該單擊岩石，紙張或剪刀這三個圖像中的一個，並且當他們單擊這三個選項之一時，它會將這三個圖像右側的圖像更改為與您制作形狀一樣的手的圖像。在石頭，紙，剪刀的游戲中看到。 我似乎無法弄清楚如何設置onclick事件以將圖像更改為被單擊圖像的右側。 這是我的代碼示例。

（HTML）

<tr>
  <td onclick="clickRock()" id="rockClick"><img src="rock.jpg" alt="Rock"></td>      
  <td rowspan="3" id="change1"><img src="leftPaperHand.jpg" alt="Left Hand" height="350"></td>       
  <td rowspan="3" id="change2"><img src="rightRockHand.jpg" alt="Right Rock" height="350"></td>
</tr>

（javaScript）

 function clickRock(args) {
   img= document.getElementById("change1");
   img.src="leftRockHand.jpg"
 }

Answer 1

這樣編寫的函數將起作用。 這樣，您將目標圖像ID作為第一個參數，將要替換其的圖像作為第二個參數。

function clickRock( targetImg, chgeImg ) {
    document.getElementById(targetImg).src = changeIng;
}

document.getElementById("rockClick").addEventListener("click", clickRock( "change2", "myNewImage.jpg") );

然后，您將從HTML中刪除onClick。 這不是那么靈活。 如果我對您要執行的操作有更多詳細信息，則可以這樣做。