
初めて質問させていただきます。
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ベストアンサー
- 回答日時:
こんばんは。
>divIMG.appendChild(ary[idx]);
単純に「idx」が範囲外になっちゃってるんですが・・・。
そもそも、ボタンが押せてしまうのが問題ですね。
disabledになってない?
ありがとうございます。まさにボタンが押せてしまうのが問題でした。
case 'fbtn':
if (idx < aryImgURL.length-1) { idx++; }
break;
と-1をいれればエラーがでなくなりました。
たいへん勉強になりました。ありがとうございます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
javascriptで複数キーワード検...
-
C#で、ContextMenuStripに動的...
-
JavaScriptで日付を取得したいです
-
C#OpenCv V4にのエラーに関する...
-
IEでF12を押さないとjavascriptが…
-
ジェネレーターの作り方
-
【javascript】正規表現で括弧...
-
google apps scriptの終了のさせ方
-
ジャバスプリクトについて
-
idを使わずにonclickで自身の要...
-
jspからjavascriptの変数引継ぎ
-
「nullまたはオブジェクトでは...
-
Linux バイナリ実行できない "...
-
window.openでタイトル名の指定
-
VBAでIEのボタンを押してメッセ...
-
HTML:Tableタグに対し、JavaScr...
-
ActiveXobjectが作成できない
-
Boolean型配列中のTrueの有無を...
-
JavaScriptとHTMLの課題です
-
Latexに関する質問です。
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
C#OpenCv V4にのエラーに関する...
-
C#で、ContextMenuStripに動的...
-
食材の期限を管理するためにGAS...
-
javaScriptのコードの修正をお...
-
メールフォームの日付入力フォ...
-
GASでundefinedエラーが出ます
-
var exports = exports || {}; ...
-
google apps scriptの終了のさせ方
-
JavaScriptでテーブル内?に矢...
-
ジェネレーターの作り方
-
HTMLで作った時報アプリが動き...
-
gas スプレッドシートがアクテ...
-
ASP.NET MVCでObjectをjsに渡す
-
setTimeoutによる繰り返しが途...
-
イラレでナンバリングする方法
-
定積分の近似値を計算する関数c...
-
pdfに丸秘などのスタンプを...
-
【JavaScript】数当てゲームを...
-
シンプルなweb版スタンプラリー...
-
翌月を取得するGASが分かりません
おすすめ情報