クリックしたimgのsrcを取得し、取得したimgのsrcを指定した場所に表示させる方法(クリック可能箇所複数の場合)

前提・実現したいこと

こんにちは、初学者です。
説明が十分でない、何を言っているのか不明でしたら申し訳ありません。

javascriptで画像をクリックすると、クリックした画像が指定の場所に表示されるようなものを作っています。
車のWEBページのような、カスタムオプションを選択すると車に表示されるイメージです。
下記記載のタグで実行はできたのですが、
実際は<div class="hoge-wrapper">内
<a href="#"><img id="btn1" src="images/hoge3.png"></a>の
画像srcが数十あるため、
javascriptで関数として

・クリックされた<a>の<img>srcを取得、取得した<img>srcを指定の場所に表示させる

として、簡略化できると考え実装がしたいです。

発生している問題・エラーメッセージ

javascriptの関数で、
取得して指定の場所に表示させる<img>srcが一つだけなら表示させることができたので、
複数ある場合の書き方を教えていただきたいです。

該当のソースコード

html
1<!-- こちらは上述した実行できる書き方です。 -->
2<!-- HTML1 -->
3<body>
4	<div class="hogespace">
5		<img id="PhotoSpace" src="images/hoge1.png">
6		<img id="PhotoSpace2" src="images/hoge2.png">
7	</div>
8	<div class="hoge-wrapper">
9		<a href="#"><img id="btn1" src="images/hoge3.png"></a>
10		<a href="#"><img id="btn2" src="images/hoge4.png"></a>
11	</div>
12</body>

javascript
1//こちらは上述した実行できる書き方です。
2//HTML1 の javascript
3document.getElementById("btn1").onclick = function() {
4document.getElementById('PhotoSpace').src = 'images/hoge3.png';
5}
6document.getElementById("btn2").onclick = function() {
7document.getElementById('PhotoSpace').src = 'images/hoge4.png';
8}

html
1<!-- こちらは関数で簡略化したいために変更したコードです。 -->
2<!-- HTML２ -->
3<body>
4	<div class="hogespace">
5		<img id="PhotoSpace" src="images/hoge1.png">
6		<img id="PhotoSpace2" src="images/hoge2.png">
7	</div>
8	<div class="watch-wrapper">
9		<a href="#"><img  id="btn" class="hogebtn" onclick="test()" src="images/hoge3.png"></a>
10		<a href="#"><img  id="btn" class="hogebtn" onclick="test()" src="images/hoge4.png"></a>
11	</div>
12</body>
13

javascript
1//実現できるであろう考えを調べて書いたコードです。
2//HTML2 の javascript
3const test = ()=> {
4 const img = document.getElementById('btn');
5 const src = btn.getAttribute('src');
6 document.getElementById('PhotoSpace').src= btn.src;
7}

試したこと

onclick属性でクリックした際の処理ができることを知った。
getAttribute メソッドを利用して、 src 属性の値を取得できることを知った。
これらを踏まえ、
取得して指定の場所に表示させる<img>srcが一つだけなら表示させることができたので、
複数ある場合の書き方を教えていただきたいです。

document.getElementById() でidを取得するが、idは同じ名前を複数使えない為、ボタンとしている<a>すべてにid="btn"として、クリックされた箇所の<img>srcを取得して表示させる。ということはできないと知った。

document.getElementsByClassName() でclassを取得するが、同じclass名全てを取得する為、ボタンとしている<a>すべてにclass="hogebtn"とすると、どの<img>を押してもすべて取得されると知った。

補足情報（FW/ツールのバージョンなど）

ブラウザはchromeです。
興味を持ち、できた時の喜びがうれしく独学で頑張って調べていますが、どのように調べればよいかわかりませんでした。

よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

その場合thisを使うと共通化できるよ
これで"test"の"el"に何が設定されているかブラウザの開発モードで確認してみると判りやすいと思います。

Javascript
1function test(el){
2}

HTML
1<a id="a_tag" href="#" onclick="test(this);">
2<img id="img_tag" src="image001.png" onclick="test(this);"/>

投稿2020/09/26 15:41

kuma_kuma_

総合スコア2506

mapoo

2020/09/27 02:35

ご教示いただきありがとうございます。私の勉強不足で申し訳ありませんが、回答いただいたjavascriptとHTMLでサンプルを作成し、開発モードのconsoleで動きを確認するということでしょうか？

kuma_kuma_

2020/09/27 03:31

> javascriptとHTMLでサンプルを作成し、開発モードのconsoleで動きを確認するということでしょうか？はいそうです。これで共通のfunctionが作れますよという意味です。（実際動かしたら判ります。）

mapoo

2020/09/27 07:12

追加の質問へのご回答ありがとうございます。親切に教えて下さったにもかかわらず、大変申し訳ございませんが、教材を一周した後に、初めてjavascriptでモノを作成している為、恥ずかしながらkuma_kuma_様が教えて下さったことが理解できません、、、初めに回答いただいたコードでサンプルを作成し、 image001.pngをクリックして開発モードのconsoleを確認してみると、 Uncaught ReferenceError: test is not defined at HTMLImageElement.onclick (index.html:9) Uncaught ReferenceError: test is not defined at HTMLAnchorElement.onclick (index.html:8) こちらの２つのエラーが表示されます。試しに<a>以降をid名だけ変更して1つ複製し、クリックするとどちらも同じエラーが出ました。 function内に何も書いていないから起こるエラーで、動きとしては共通のfunctionができている。ということでしょうか？・調べたこと Uncaught ReferenceError: 変数名や関数名 is not defined　エラーの理由：変数名や関数名が定義されていない

kuma_kuma_

2020/09/27 07:15

いや JSファイルか<script>タグに function test(el){ } って記載した？ testって関数ないよ！って言われているんだけど．．．

mapoo

2020/09/27 09:53

大変失礼いたしました。 scriptの読み込みを失念しておりました。 console 内には何も表示されなくなりました。

kuma_kuma_

2020/09/27 09:59

処理を止めにくいので function test(el){ console.log('Test!'); } に変更して”console.log('Test!');”にブレークポイント設定してからクリックしてelの中身確認してみると何が帰ってきているか判るよ！

mapoo

2020/09/27 14:00

ありがとうございます！無事、実際のコードにも実装でき、画像が切り替わることが確認できました！ブレークポイントを設定して言葉があっているか不安ですが、 el = クリックした要素{} が入っているのが確認できました。 thisについての理解が足りていないので、そちらは調べて勉強いたします。当たり前のこともわかっていない状態にも関わらず、教えていただきありがとうございました。

行動規範の内容に同意します