イラストのボタンを押したときの画像の表示

質問

イラストをクリックしたとき、ボタンに応じた文章と画像を、同時にそれぞれ決まった場所に表示したいです。
表示する場所の設定と、文章のほうはなんとかできました。
ですが、画像の表示(入れ替え)がうまくいきません。
色々調べてみたのですが、方法はいろいろあったものの恥ずかしながら理解できませんでした。

下に該当する部分のコードを書きます。
どうか、アドバイスよろしくお願いします。版権を利用している部分は伏せます。

setumei　　は文章を表示する部分　です。
setumei2　は画像を表示させる部分　にしたいです。
syoukai.png　を　gpikumin3.pngに画像を入れかえる部分がわかりません。
課題用であり、HP制作用のものではないです。

function button1(){
var div = document.getElementById('setumei');
div.innerHTML = "簡易説明";
div.style.background = "#ffffff";　　　　　　　　　　　　　　
div.style.border = "1px solid #000000";　　　　　

　　var div = document.getElementById('setumei2');　　　　　←わからない部分
　　 dav.src = "gpikumin3.png";
div.style.background = "#ffffff";
div.style.border = "1px solid #000000";

<input type="image" onclick="button1()" src="mimin11.png" height="300" width="300"/>
↑クリックで文章と画像を表示させるイラスト型のボタン

<div id="setumei">
上記の１、２、３のイラストを押すと、簡易説明がここに表示されます。
</div>
<div id="setumei2"><img src="syoukai.png">

↑上が文章、下が画像の表示場所です。

回答No.1

Ogre7077 · ベストアンサー

> dav.src = "gpikumin3.png";
変数 dav とはなんでしょうか?

おそらくは<div>の子要素の<img>を指すと思いますが、
それならば変数 div とは別に用意しなければいけません。

var dav = div.firstChild;
または
var dav = div.querySelector('img');
または
var dav = document.querySelector('#setumei2 img');

あたりでいかがでしょう

お礼

回答ありがとうございます。
davの使い方がよくわかっていなかったです、教えていただき助かりました。
指摘された部分と入れかえたところ、画像が表示されました。
3つともプリントで見たことないものばかりで、参考書を買うべきですね。

勉強します、本当にありがとうございました！