如何使用 onclick 事件单击一个图像并让它更改同一网页上的另一个图像？答案

【问题标题】：How can I click on one image using the onclick event and have it change another image on the same webpage?如何使用 onclick 事件单击一个图像并让它更改同一网页上的另一个图像？
【发布时间】：2016-05-03 12:38:57
【问题描述】：

用户应该点击三个图像之一，石头、纸或剪刀，当他们点击这三个选项之一时，它会将这三个图像右侧的图像更改为制作该形状的手的图像就像你在玩石头剪刀布的游戏中看到的那样。我似乎无法弄清楚如何设置 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"
 }

【问题讨论】：

w3schools.com/js/tryit.asp?filename=tryjs_intro_lightbulb
问题是id为“change1”的元素实际上是图片的父元素td。尝试将 id="change1" 从 td 移动到其中的 img 元素。
如果您使用调试器单步执行代码并检查img 变量的值，您会发现它不是您认为的img 元素。

标签： javascript html

【解决方案1】：

这样写的函数可以工作。这样，您可以将目标图像 ID 作为第一个参数，将要替换它的图像作为第二个参数。

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

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

然后你会从你的 HTML 中取出 onClick。这不是那么灵活。如果我对您正在尝试做的事情有更多详细信息，那可能会起作用。

【讨论】：