Question

我在使用onclick更改图片来源时遇到问题。它在我使用getElementById时有效，但在getElementsByClassName时却无效。

这里是垃圾箱......

<h1>Image swapping</h1>
<img src="http://via.placeholder.com/350x150" class="image_swap"/><br>
<button onclick="document.getElementsByClassName('image_swap').src='http://via.placeholder.com/250x150'">Swap to smaller</button>
<button onclick="document.getElementsByClassName('image_swap').src='http://via.placeholder.com/350x150'">Swap to larger</button>

https://jsbin.com/gupabe/6/edit?html

Answer 1

document.GetElementsByClassName返回一个元素列表（因为你可以有多个具有相同类名的东西）调整代码以选择第一个用于简单修复的代码

https://jsbin.com/sevituduxu/1/edit?html,output

<button onclick="document.getElementsByClassName('image_swap')[0].src='http://via.placeholder.com/250x150'">Swap to smaller</button>
<button onclick="document.getElementsByClassName('image_swap')[0].src='http://via.placeholder.com/350x150'">Swap to larger</button>

Answer 2

添加内联事件是笨拙的，它违背了关注点。使用addEventListener＆amp;向每个按钮添加事件。其次document.getElementsByClassName返回一个集合。因此必须传递索引以将事件添加到特定元素

document.getElementById('smaller').addEventListener('click', function() {
  document.getElementsByClassName('image_swap')[0].src = 'http://via.placeholder.com/350x150'
});

document.getElementById('larger').addEventListener('click', function() {
  document.getElementsByClassName('image_swap')[0].src = 'http://via.placeholder.com/250x150'

})

<h1>Image swapping</h1>
<img src="http://via.placeholder.com/350x150" class="image_swap" /><br>

<button id="smaller">Swap to smaller</button>
<button id="larger">Swap to larger</button>

onclick更改图像源

2 个答案: