IE8で種類が一致しませんとエラーが出てしまいます

質問

初めて質問させていただきます。
javascriptは、勉強しだした全くの初心者ですがよろしくお願い致します。

自分で作ったHPで、写真をボタンで順に切り替えるページがあり、ちょうどYahooの知恵袋でぴったりのソースを書いていらっしゃる方をみつけ、参考にさせてもらってページを作ったのですが、先日IE8で確認したところ、種類が一致しませんとエラーが出てしまいました。safariやFirefox(MacでもWindowsでも）では問題ありません。
自分で手直しした部分の可能性もあるため、参考にした元のソースで、テストのページを作ってみましたが、やはり同じ　divIMG.appendChild(ary[idx]);　の行がだめなようです。
テストのページアドレス
http://www.ne.jp/asahi/coo/pipi/
ここでは5枚の画像を入れてありますが右のボタンで5枚目を表示した後さらに押すとエラー
になります。下の方　divIMG.appendChild(ary[idx]);の部分でエラーが出ます。

lightbox 等画像を順送りで閲覧出来る方法もあるようですが、実際のHPはこの方法で物件ごとのぺージを沢山作ってしまっているので部分的にソースを修正して回避出来ないものかと考えております。自分でも調べてみましたが、全く頭がついていきません。なにとぞよろしくお願い致します。

質問の文字数制限にかかるのでscriptの部分だけ書きます。

<script type="text/javascript">
var ary = []; var idx = 0; var divIMG;
var btnF; var btnP; var btnE; var btnT;
var aryImgURL = [
'img1.jpg', 'img2.jpg', 'img3.jpg',
'img4.jpg', 'img5.jpg']

function preload(imgs) {
for (var i = 0; i < imgs.length; i++) {
var elmIMG = new Image();
elmIMG.src = imgs[i];
ary.push(elmIMG);
}
}
function test(e) {
var tgt = e.srcElement ? e.srcElement: e.target;
switch (tgt.id) {
case 'fbtn':
if (idx < aryImgURL.length) { idx++; }
break;
case 'tbtn':
idx = 0; break;
case 'ebtn':
idx = aryImgURL.length - 1; break;
case 'pbtn':
if (idx > 0) { idx--; }
break;
}
showImage();
changeButtonStatus();
}
function showImage() {
while (divIMG.hasChildNodes()) { divIMG.removeChild(divIMG.firstChild); }
divIMG.appendChild(ary[idx]);
}
function changeButtonStatus() {
if (idx == 0) {
btnP.disabled = true; btnT.disabled = true;
} else {
btnP.disabled = false; btnT.disabled = false;
}
if (idx == aryImgURL.length - 1) {
btnF.disabled = true; btnE.disabled = true;
} else {
btnF.disabled = false; btnE.disabled = false;
}
}
window.onload = function() {
divIMG = document.getElementById('imgarea');
btnF = document.getElementById('fbtn');
btnP = document.getElementById('pbtn');
btnE = document.getElementById('ebtn');
btnT = document.getElementById('tbtn');
preload(aryImgURL);
showImage();
changeButtonStatus();
}
</script>

回答No.2

taka451213 · ベストアンサー

こんばんは。

＞divIMG.appendChild(ary[idx]);
単純に「idx」が範囲外になっちゃってるんですが・・・。
そもそも、ボタンが押せてしまうのが問題ですね。
disabledになってない？

お礼

ありがとうございます。まさにボタンが押せてしまうのが問題でした。
case 'fbtn':
if (idx < aryImgURL.length-1) { idx++; }
break;
と-1をいれればエラーがでなくなりました。

たいへん勉強になりました。ありがとうございます。

回答No.1

babu_baboo

もうねむくて、というかそのこーどが、なんというか、あれなもんで
new Image () と、DOM の img とは、ちょっとちがうかもよ？

i

お礼

眠いところたいへんありがとうございました。
なんとか解決しました。
DOM??状態でしたが、何となく雰囲気だけはわかるようになりました。　
勉強になります。