如何使用图片点击事件答案

【问题标题】：How to use image onclick event如何使用图片点击事件
【发布时间】：2019-06-02 09:29:06
【问题描述】：

我的应用程序中有一张图片。我尝试通过 onclick 事件将此图像更改为另一个，但我不知道为什么它不起作用。这是我的代码：

<body>
<div> 
  <img onclick="click()" src="http://chittagongit.com//images/smile-icon/smile-icon-6.jpg" id="smile">
</div>
<script>
  function click () {
    document.getElementByID("smile").src = "http://chittagongit.com//images/smile-icon/smile-icon-5.jpg"
  }
</script>

codepen 上的相同代码： https://codepen.io/szczypkamaciek/project/editor/DBrPbw

谢谢你的帮助！！！

【问题讨论】：

getElementById 不是 getElementByID

标签： javascript image onclick

【解决方案1】：

当一切按预期进行时，请务必检查控制台。你拼错了“getElementByID”它应该是“getElementById”（小写“d”）。

此外，使用 addEventListener 通常是更好的做法：

<script>
  var smile = document.getElementById("smile");
  smile.addEventListener('click', function () {
    smile.src = "http://chittagongit.com//images/smile-icon/smile-icon-5.jpg"
  });
</script>

【讨论】：

【解决方案2】：

错误document.getElementByIdId不是大写ID

function click() {
    document.getElementById("smile").src = "http://chittagongit.com//images/smile-icon/smile-icon-5.jpg"
}

【讨论】：

【解决方案3】：

这段代码有两个问题：

getElementById 拼写错误（由 getElementByID 插入）
您的代码不能以这种形式工作，因为您使用click() 作为您的函数名。以这种方式使用 click 将触发点击事件，而不是您的功能 - 您可以在此处阅读更多信息：click() in JS

无论如何，通常最好使用侦听器而不是直接节点声明。

【讨论】：