HTMLのプログラムでJavaScriptを外部処理にして以下のようにグラフィックデータを配列に入れ、一括で登録しHTML内でデータテーブルのオフセット値からデータを得ようとしましたがうまくいきません。
ページがロードされた時にデータを一括で読もうとしているのですが、デバッグのためにDocument.writeで処理の入り口と出口で文字を表示させましたが、入り口の方しか表示されず、処理が正しく行われていないようです。
どのようにすればうまくデータを得ることができますでしょうか?
----JavaScript----
var imgData = [
"img/01.gif",
"img/02.gif",
"img/03.gif",
"img/04.gif",
"img/05.gif",
"img/06.gif",
"img/07.gif",
"img/08.gif",
:
:
]
imgTbl = new Array();
for(var i=0; i<imgData.length-1; i++){
imgTbl[i] = new Image();
imgTbl[i].src = imgData[i];
}
window.onload=function(){
ImageInit(imgData.length);
}
function ImageInit(no){
for(var i=0; i<no; i++){
document.write("IN..."+i+"<br>"); <--コチラは表示されます。
imageSetSrc(i);
document.write("OUT..."+i+"<br>"); <--コチラは表示されません。
}
}
function imageSetSrc(i){
document.getElementById(i).setAttribute("src", imgData[i]);
}
-----------------------------------------------------
----HTML----
:
:
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td id=0 src="ImageSetSrc(0)" width="758" "80"></td> <--仮にデータのオフセットを0としています。
</tr>
:
:
</table>
No.1ベストアンサー
- 回答日時:
直接の原因はdocument.writeを使用しているので、HTMLソースがキャンセルされてしまうからだと思われます。
あと、いろいろ…
for(var i=0; i<imgData.length-1; i++){ は-1は不要では?
<td id=0 src="ImageSetSrc(0)" width="758" "80"> の80はheightなのか?
ここにsrc="ImageSetSrc(0)"と書いても、ImageSetSrc(0)というファイルを探しにいくだけ。スクリプトで書き換えるのだから不要では?
それと、idは数字で始まるのは不可ではなかったっけ?(←曖昧:通じるみたいだけど…)
省略しているところもどうなっているのか不明ですが、とりあえずfunction ImageInitを以下のようにすれば動くのでは?(最後にまとめて表示させています)
function ImageInit(no){
var mes='<p>';
for(var i=0; i<no; i++){
mes += "IN..."+i+"<br>";
imageSetSrc(i);
mes += "OUT..."+i+"<br>";
}
var e = document.createElement('div');
e.innerHTML = mes;
document.body.appendChild(e);
}
この回答への補足
document.writeに関しては実際の処理に必要ではなく、正しくセットされているか調べてみたかったので処理の中に組み込みました。
Document.writeを使うとHTMLソースがキャンセルされるのですか・・・。大変勉強になりました。
しかしこの場合、HTMLには移行せずにJavaScript内で「INの表示→スクリプトの実行→OUTの表示」という処理が行われており、OUTが表示されないのです。
もしスクリプト内でも処理がキャンセルされてしまうのでしたら、デバッグ用の表示なのでdocument.writeはスクリプト内から外そうと思います。
imgTbl[].srcの中にはimgData[]の値が正しくセットされている事は確認しているのですが、HTMLの処理の中でimgTbl[X].srcをXの値で読めるようにしたいのです。
HTMLを始めたばかりなのでわからない事が色々とあり、ご教授いただけると助かります。
HTMLはイベントが起こらない限り書き換えを行なわないようなので
思ったような処理には向いていないようですね…(Flash等を使えば別でしょうが)
直にアドレスを書きたくなかったのでデータテーブルを持ってスッキリとHTMLを書きたかったのですが、却って見づらいプログラムになる事が分かりました。
回答をいただきありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- JavaScript javascriptで変数を組み込みたい 2 2023/01/13 09:52
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- HTML・CSS img と p を縦中央に配置したいのですがうまくいきません。 2 2023/01/12 14:38
- Perl 画像が表示でnull; this.src 1 2022/04/19 11:31
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
window.openで値の渡し方を教え...
-
javascriptテキストBOX色を元に...
-
フォームに入力された値により...
-
MAX関数を使ってからLEFT JOIN...
-
1枚の画像をクリックすると複数...
-
自働生成される<div>タグに連番...
-
javascriptでフォーカスを当て...
-
指定したパスが現URLに含まれて...
-
jQuery bxSlider 画像に変更
-
removeAttribute()メソッドで削...
-
CSS <div>の入れ子が反映さ...
-
外部javascriptの重複を防ぐには
-
クリックすると下に説明文が出...
-
YouTubeをブログに貼る時、1つ...
-
リンク色を動的に変更したい。i...
-
離れた場所にマウスオーバーで...
-
ネストされたハッシュの値から...
-
jQuery 複数のfind()
-
【jQuery】hoverしたn秒後にイ...
-
IplImageをPictureBoxへ表示が...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
window.openで値の渡し方を教え...
-
jQueryでサーバー上のファイル...
-
画像と文字を同時に切り替えたい
-
画像をクリックすると別ウイン...
-
Microsoftのクリップギャラリー...
-
画像の座標位置取得
-
リンクをオーバーマウスで画像表示
-
スライドショーにフェード効果...
-
javascript 画像切り替え ラン...
-
クリックしたらJavaScriptで数...
-
JavaScriptで画像置換えてクリ...
-
インラインフレームでのクッキ...
-
<img>タグの alt= の値をキャプ...
-
JavaScriptクリックした画像を...
-
画像クリックでクリックした画...
-
【jQuery】複数の画像の読み込...
-
画像の自動切り替えができなく...
-
imgのsrcに値を設定するには
-
クリックとダブルクリック
-
jQueryで画像を重ねる
おすすめ情報
