JavaScript画像のランダム表示時のテキストとの連動方法

javascriptについて質問です。
10枚の画像をランダム表示し、その都度、画像真下に画像1…画像2というようなテキストを表示するプログラムを作りたいのですが、テキストと連動して画像を表示するやり方が分かりません。
一応、画像はランダムに表示させることは出来ました。
getElementで取得したid、changeを変数strに代入し、innerHTMLでテキストを表示させようと思ったのですがうまくいきません。
そもそもこの方法が合ってるのかもわかりません。
どなたか分かる方いましたらよろしくお願いします。

<body onLoad="rndImg()">
<h2>写真のランダム表示</h2>
<div id='change'></div>

<script>
var imgNum=10;
function rndImg(){
  var rnd=Math.floor(Math.random()*imgNum +1);
  var str=document.getElementById('change');
  str.innerHTML='テキスト';
  '<img src="img/img' +rnd+ '.jpg">';
}
</script>

Lhankor_Mhy

2016/11/21 11:32

当方で実行したところ、問題なく「テキスト」と表示されました。『うまくいきません。』とのことですが、具体的にはどのようなことが起きましたか？

nasio777

2016/11/21 21:08

再度自分でも試したところ、画像は表示されずに、テキストとしか表示されません。また、画像切り替えの都度、10枚の画像の真下にそれぞれのテキストを追加したいです。個別に設定するやり方がわかりません。説明下手ですみませんがよろしくお願いします。。

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

回答1件

こういうことですか？

javascript
1var imgNum=10;
2var textArr = [
3  null,
4  'テキスト1',
5  'テキスト2',
6  'テキスト3',
7  'テキスト4',
8  'テキスト5',
9  'テキスト6',
10  'テキスト7',
11  'テキスト8',
12  'テキスト9',
13  'テキスト10',
14]
15function rndImg(){
16  var rnd=Math.floor(Math.random()*imgNum +1);
17  var str=document.getElementById('change');
18  str.innerHTML = textArr[rnd] +
19  '<img src="img/img' +rnd+ '.jpg">';
20}