onclickは画像ソースを変更します

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 &を使用します。次に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>