お世話になります。どうしてもできなくて困っています。
<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ベストアンサー
- 回答日時:
ご提示のままでは、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)
になったら、別のページにジャンプする(ちょっと変な作りなんですけどね)
ので、そのあたりは大丈夫です。
とても参考になりました、ありがとうございます
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript アップロードファイルの種類によって処理を分岐させたいのですが書き方が分からずアドバイスお願いします 4 2023/06/17 19:12
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- JavaScript javascriptで変数を組み込みたい 2 2023/01/13 09:52
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
指定時間になったら、WEBサイト...
-
フォームが空欄の時にフォーム...
-
Cookieに保存されない
-
ボタンを押したあとに画像を表...
-
二次元配列の全要素の全要素を...
-
初心者です。gulpでコンパイル...
-
HTMLタグに複数のクラスを設定...
-
フロントエンドフレームワーク...
-
sessionStorageを調べています。
-
jsで診断コンテンツのページ内...
-
メールフォームの日付入力フォ...
-
disabled プロパティが表示され...
-
出発駅A、到着駅Bを選択すると...
-
特定の文字列を複数抜き出した...
-
ジャバスクリプトについて。
-
プログラムについて。
-
Q&A掲示板の入力フォームに文字...
-
var exports = exports || {}; ...
-
変数名をどのようにつけるのが...
-
HTMLで作った時報アプリが動き...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
window.openで値の渡し方を教え...
-
jQueryでサーバー上のファイル...
-
【jQuery】複数の画像の読み込...
-
複数のバナーをリロードする度...
-
jQueryで画像を重ねる
-
一定時間ごとにgif画像の切...
-
画像をクリックすると別ウイン...
-
JavaScriptで画面サイズによっ...
-
HTMLページ内のタグに対しての...
-
【javascript】ロールオーバー...
-
HPに複数の画像をクリックで切...
-
JavaScriptで画像置換えてクリ...
-
画像と文字を同時に切り替えたい
-
リンク切の場合リンクしない
-
画像の入れ替え
-
連続したURLへのwindow.openの...
-
javascriptによるランダム画像...
-
複数のボールの落下、バウンド...
-
戻り読みの代わりとなる正規表...
-
outlook2010の不具合で困ってい...
おすすめ情報