Question

我的应用程序中有一张图片。我尝试通过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

感谢帮助！

Answer 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>

Answer 2

错误document.getElementById Id不带有大写字母ID

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

Answer 3

此代码中有两个问题：

遗忘了getElementById（由getElementByID插入）
由于您使用click()作为函数名，因此您的代码无法以这种形式工作。以这种方式使用click会触发点击事件，而不是您的函数-您可以在此处阅读更多信息：click() in JS

无论如何，总的来说，最好使用侦听器代替直接声明节点。

如何使用图片onclick事件

3 个答案: