画像と文字を同時に切り替えたい

質問

お世話になります。どうしてもできなくて困っています。
<script>
var n=1;
var msg = ["テキスト1", "テキスト2", "テキスト3", "テキスト4", "テキスト5", "テキスト6", "テキスト7"];

function change(){
i++;
document.img.src="../img/test" + n+ ".jpg";
}
</script>
<a href="JavaScript:change();"><img src="../img/test1.jpg" name="img"/></a>

<script>
document.write((msg[i++]));
</script>

これで、画像をクリックすると、画像はどんどん切りかわっていきますがその下のテキストが切り替わりません！ずっとテキスト1が出たまんまなんです。どうしたらいいのかわかりません！分かる方、ぜひ教えてください

回答No.1

fujillin · ベストアンサー

ご提示のままでは、iの初期値が設定されていないので、undefinedとなってエラーになり動作しないのでは？

＞画像をクリックすると、画像はどんどん切りかわっていきますが～
nの値は1のまま変わらないので、test1.jpgが表示され続けるはずですけど？

＞画像と文字を同時に切り替えたい
のであれば、画像を切り替えるのと同じようにchange()の中でテキストも切り替えてあげるようにする必要があります。

＞document.write((msg[i++]));
はロード時の解析で一度実行されるだけなので
<span id="hoge">テキスト1</span>
などとしておいて、changeの処理でこのテキストを変えればよろしいかと。

その前に、iとnの値がどのように変化しているか（又は、していないか）をalertなどを用いてチェックしてみてください。（まずは、エラーの原因を探してその対策をとることが先決かと）

ついでに、いらぬおせっかいではありますが、テキスト（配列）や画像がなくなると（無限にはないでしょうから）、そこで画像が表示できなくなったり、エラーになったりしそうですが…

やりたいことがよくわかりませんが、nで制御するならこんな感じ？
（方法は他にもいろいろあると思いますので、一例として）
配列のindexと画像の番号(?)がずれているみたいなので、わかりにくいかも…
<script>
var n=1;
var msg = ["テキスト1", "テキスト2", "テキスト3", "テキスト4", "テキスト5", "テキスト6", "テキスト7"];

function change(){
document.getElementById('hoge').firstChild.nodeValue = msg[n++];
document.img.src="../img/test" + n + ".jpg";
n = n % msg.length;
}
</script>

<a href="JavaScript:change();">
<img src="../img/test1.jpg" name="img"/>
</a>
<div id="hoge">テキスト1</div>

お礼

ありがとうござます！無事に動きました。

画像が管理上、配列とずれた画像名になってしまいました。そのあたりも考慮します。

＞ついでに、いらぬおせっかいではありますが、テキスト（配列）や画像がなくなると（無限にはないでしょうから）、そこで画像が表示できなくなったり、エラーになったりしそうですが…

ご指摘ありがとうございます。
if(n==10)
になったら、別のページにジャンプする(ちょっと変な作りなんですけどね)
ので、そのあたりは大丈夫です。

とても参考になりました、ありがとうございます