javascriptで画像表示変更が出来ない

質問

ＨＴＭＬページで、javascriptを使ってそのページにアクセスするたびに、画像が変更させているのですが、ときどき画像が表示されません。

ソースは下記です。
画像が落ちないようにする方法はないのでしょうか？
宜しくお願いします。

<script type="text/javascript"><!--
var imglist2 = [
[ "topimg/top-e001.jpg", "http://www.～.html" , "○○○"] ,
[ "topimg/top-e002.jpg", "http://www.～.html" , "○○○"] ,
[ "topimg/top-e003.jpg", "http://www.～.html" , "○○○"] ,
];
function RandomImageLink2() {
var selectnum = Math.floor(Math.random() * imglist2.length);
var output =
'<a href="' + imglist2[selectnum][1] + '" target="_blank">' +
'<img src="' + imglist2[selectnum][0] + '"' +
' alt="' + imglist2[selectnum][2] + '">' +
'</a>';
document.write(output);
}
//--></script>

回答No.4

4017B

＞誤動作の原因
“imglist2.length”の戻り値を、ちゃんと複数エンジンで検証してみました。

・IE（Trident） … 4
・Gecko … 3
・Webkit … 3

以上の様な戻り値でした。自分は普段からChrome1択だったので、ちょっと盲点でした！

＞スクリプトエンジンによって違いがある
確かにNo.1回答者さんの仰る様に、末尾にコンマ（ , ）がある場合。中身が無くてもTrident系、つまりIEは配列の要素があるとカウントして、lengthの戻り値を返してしまうみたいです。

このため、IE系では乱数値が 0～3 の範囲を取るので。“imglist2[3][n] ”という存在しない配列の要素を参照するためのバグだと思われます。

なのでNo.1回答者さんの仰る様に、
＞var max_num = imglist.length -1;
～としてしまうと、逆にIE系以外では最後の配列要素が無視されてしまうので。それはそれでまた意図した動作にならないので、もし自分の例文を用いる場合は後ろの“-1”の部分を削除して使って下さい！

P.S.
自分が math.floor関数の挙動を勘違いしていました（四捨五入的な挙動だとばかり…）！

なのでNo.1回答者さんの仰る様に、math.random関数の取る値の範囲は、0～0.99999...なので。math.floor関数で、小数点以下が切り捨てられるので、配列のlength値をそのまま代入して問題無いです（配列内の末尾のコンマさえ無ければ）。

ですので、とりあえずは質問者さんの例文のまま、配列内の末尾のコンマさえ削除して置けば。一応は問題無く動作するはずです。が、不測の事態に備えて、HTMLでimgタグであらかじめ代替画像を表示しておく～という見解は、自分もNo.1回答者さんと同様です。

お礼

ありがとうございました
何とかなりました

回答No.3

fujillin

#1です。

＞例文のスクリプトの誤動作の原因は、
＞Math.random() * imglist2.length
これが問題とは思えません。

ご提示のスクリプトでは
　Math.floor(Math.random() * imglist2.length)
となっていますので、配列の引数を超える可能性があるとするとMath.random()が1を返す時だけですが、基本的に 0 <= Math.random() < 1 のはずなので、そのようなことは起こりません。（もしかするとスクリプトエンジンによって違いがあるのかも知れませんが…）
http://www2u.biglobe.ne.jp/~oz-07ams/prog/ecma262r3/15-8_The_Math_Object.html#section-15.8.2.14

逆に、1を減じてしまうと、配列の最後のものが選択（使用）されることがなくなってしまいます。

それよりも、データ配列の最後のカンマ
var imglist2 = [
[ ・・・・・・] ,
[ ・・・・・・] ,
[ ・・・・・・] ,　　//←ここのカンマ
];
のほうがエラーの原因となる可能性が高いと言えるでしょう（投稿時のタイポだと解釈しましたが）。

お礼

ありがとうございました。
できました

回答No.2

4017B

とりあえずこんな感じで処理しておけば、JavaScriptが上手く動作しなかった場合にも保険がかかります。

━ JavaScript部分 ━━━━━━━━━━━━━━━━━━━━━━━━
<script type="text/javascript"><!--
var imglist = [
['./topimg/top-e001.jpg', 'http://example.com/sample-001.html', 'あああ'],
['./topimg/top-e002.jpg', 'http://example.com/sample-001.html', 'いいい'],
['./topimg/top-e003.jpg', 'http://example.com/sample-001.html', 'ううう']
];

window.onload = function(){
if ( document.getElementById('img_change') ){
var max_num = imglist.length -1;
var rand_num = Math.floor( Math.random()*max_num );
var my_output = '<a href="'+ imglist[rand_num][1] +'"><img src="'+ imglist[rand_num][0] +'" alt="'+ imglist[rand_num][2] +'"></a>';
document.getElementById('img_change').innerHTML = my_output;
}
};
//--></script>
━ JavaScript部分 ━━━━━━━━━━━━━━━━━━━━━━━━

～上記の様なJavaScriptを記述して置いて、HTML本体の画像を表示する部分を…

<div id="img_change"><img src="./topimg/top-e001.jpg"></div>

～と言う風にして置きます。これで仮にブラウザのver.違いとかで、うまくJavaScriptが動作しなかったとしても、とりあえずはHTMLで記述された画像が表示されます。注意すべき点は、DIVタグのid属性は、必ず固有名詞というか、そのページ内で同じid名は1個だけにしないとバグります。

尚、サンプルは適当に変数名とか弄ってありますので。そちらの環境に合わせて、直して使って下さい。

P.S.
例文のスクリプトの誤動作の原因は、
　Math.random() * imglist2.length
～の部分です。

“length”で配列の数を求めて、必要な乱数の上限値に設定するという考え方までは良いのですが。JavaScriptでは配列の値の数は1以上の整数値で返されるのに対し。

実際の配列の開始番号は“0”から始まるため、例文の配列の引数の範囲は 0～2 の範囲を取るのに対し。実際に生成された乱数の値は、0～3 の範囲を取るためです。この場合、乱数の値が 3 の時は、存在しない配列の値を参照するため、エラーになり何も表示されなくなります。

お礼

ありがとうございました。
何とかできました

回答No.1

fujillin

＞ときどき画像が表示されません。
どの様なときに表示されないのか不明なので、原因がわかりませんが、
アドレス等に間違いがないのであれば…

＞画像が落ちないようにする方法はないのでしょうか？
デフォルトとして、HTMLソース内にあらかじめ
　<a href="～～" target="_blank"><img src="topimg/top-e001.jpg" alt="○○"></a>
のような記述をしておけば、仮にスクリプトがオフになっている場合などでも表示できます。

その上で、スクリプトで「上記のリンク先や画像のアドレスなどを入れ変える」ようにしておけばよいのではないでしょうか？
（現状はdocument.write()で直接出力していますが…）

お礼

ありがとうございました
何とかなりました