• 締切済み

Java script エラー

以前、質問して教えていただいたJava scriptですが、 サーバにアップしたところ Java script エラー 「pages[i].style.display = 'none';」が発生しました。 Java scriptの知識が全くない素人で申し訳ないのですが、 エラーの原因を教えていただけますでしょうか？ よろしくお願いいたします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "​http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">​ <html xmlns="​http://www.w3.org/1999/xhtml"​ xml:lang="ja" lang="ja"> <head> <title>タブ切替のサンプル</title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <script type="text/javascript"> // <![CDATA[ var tab = { peek:0, init: function(start){ var tabs = this.setup.tabs; var pages = this.setup.pages; for(var i=0; i<pages.length; i++) { if(i !== 0) pages[i].style.display = 'none'; tabs[i].onclick = function(){ tab.showpage(this); return false; }; } this.peek = start; this.showpage(tabs[this.peek]); }, showpage: function(obj){ var tabs = this.setup.tabs; var pages = this.setup.pages; var num; for(num=0; num<tabs.length; num++) { if(tabs[num] === obj) { tab.peek = num; break; } } for(var i=0; i<pages.length; i++) { if(i == num) { pages[num].style.display = 'block'; tabs[num].className = 'present'; } else{ pages[i].style.display = 'none'; tabs[i].className = null; } } } } function initialize(){ tab.setup = { tabs: document.getElementById('tab').getElementsByTagName('li'), pages: [ document.getElementById('page1'), document.getElementById('page2'), document.getElementById('page3'), document.getElementById('page4'), document.getElementById('page5') ] } tab.init(0); } function proceed(num){ if(tab.peek + num < tab.setup.tabs.length && 0 <= tab.peek + num){ tab.showpage(tab.setup.tabs[tab.peek + num]); } } // ]]> </script>

みんなの回答

  • OKbokuzyo
  • ベストアンサー率43% (130/296)
回答No.1

サンプルコードは関数の定義しか記述されておらず、 あなたが実際どのように利用しているのかさっぱりわかりません。 これだけでは誰も何も答えようがありません。 > 以前、質問して教えていただいたJava scriptですが ここはいつも同じ人が答えているわけではありません。 前回の経緯を知らせる必要があるならリンクを貼るなどの配慮をしてください。 >Java script エラー >「pages[i].style.display = 'none';」が発生しました。 どういうエラーだったのか、エラーメッセージは何と出ていたのか書いてください。 よく見かけるのですが、教えてもらおうとしている側なのに 詳細を省くというのはいかがなものでしょうか？ 見る人が見ればエラーメッセージだけでどういう間違いを起こしているか予想がたてられるものです。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • JavaScriptエラーについて

    お世話になります。 おわかりになる方、ぜひ教えてください。 タブメニューのボタンを押すと、内容が切り替わるというJavaScriptなのですが、いちよう正常に動作はしているようなのですが、エラーがでてしまいます。 エラーを無くしたいのですが、どうすればいのでしょうか？ 【エラー内容】 'document.getElementById()'はNullまたはオブジェクトではありません。 【HTML】 <div id="javascript_tab_sample"> <ul> <li><a href="#W3C">W3C</a></li> <li><a href="#xhtml">xhtml</a></li> </ul> <dl id="w3c"> <p>内容1</p> </dl> <dl id="xhtml"> <p>内容2</p> </dl> </div> 【JavaScript】 window.onload=function() { tab.setup = { tabs: document.getElementById('tab').getElementsByTagName('li'), pages: [ document.getElementById('w3c'), document.getElementById('xhtml') ] } tab.init(); } /*--setup end--*/ var tab = { init: function(){ var tabs = this.setup.tabs; var pages = this.setup.pages; for(i=0; i<pages.length; i++) { if(i !== 0) pages[i].style.display = 'none'; tabs[i].onclick = function(){ tab.showpage(this); return false; }; } }, showpage: function(obj){ var tabs = this.setup.tabs; var pages = this.setup.pages; var num; for(num=0; num<tabs.length; num++) { if(tabs[num] === obj) break; } for(var i=0; i<pages.length; i++) { if(i == num) { pages[num].style.display = 'block'; tabs[num].className = 'selected'; } else{ pages[i].style.display = 'none'; tabs[i].className = null; } } } } よろしくお願いします。

  • ページを最初に表示したときオンになるタブを作る方法（css，javascript）

    cssとjavascriptを使ってタブを使用したページを作っています。 ページ表示時に一番左に表示される01タブを黒く表示しておいてほしいのですが、うまくいきません。 元にしたサンプルはちゃんと表示される仕様になっていましたが、いじっているうちにおかしくなったようです。 原因がわからないのでアドバイスいただけると大変ありがたいです。 よろしくお願い致します。 下記が制作中のhtmlです。 http://www014.upp.so-net.ne.jp/kanikko/test/test.html js中身＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ /*--setup--*/ window.onload=function() { tab.setup = { tabs: document.getElementById('tab').getElementsByTagName('li'), pages: [ document.getElementById('topics01'), document.getElementById('topics02'), document.getElementById('topics03'), document.getElementById('topics04'), document.getElementById('topics05'), document.getElementById('topics06'), document.getElementById('topics07') ] } tab.init(); } /*--setup end--*/ var tab = { init: function(){ var tabs = this.setup.tabs; var pages = this.setup.pages; for(i=0; i<pages.length; i++) { if(i !== 0) pages[i].style.display = 'none'; tabs[i].onclick = function(){ tab.showpage(this); return false; }; } }, showpage: function(obj){ var tabs = this.setup.tabs; var pages = this.setup.pages; var num; for(num=0; num<tabs.length; num++) { if(tabs[num] === obj) break; } for(var i=0; i<pages.length; i++) { if(i == num) { pages[num].style.display = 'block'; tabs[num].className = 'selected'; } else{ pages[i].style.display = 'none'; tabs[i].className = null; } } } } css中身＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ #javascript_tab_sample { width:448px; background:#ffffff; border:1px solid red; margin-bottom:10px; text-align:left; } #javascript_tab_sample ul#tab { margin:0; padding:0; border:1px solid black; background:blue; float:left; width:100%; } #javascript_tab_sample ul#tab li { text-align:center; border:1px solid orange; border-bottom:none; float:left; width:5em; } #javascript_tab_sample ul#tab li.selected { background-color:#000; } #javascript_tab_sample ul#tab li.selected a { color:#fff; }

    • ベストアンサー
    • HTML
  • 【javascript】ロールオーバーと画像自動切換えがバッティングし

    【javascript】ロールオーバーと画像自動切換えがバッティングして、ロールオーバーがきいていません。 javascriptは該当の動作がどれかというのが分かる程度で、書く事も修正する事もできません。 ロールオーバーが正常に動いていたページに画像自動切換えのスクリプトを設置したところ、ロールオーバーが動かなくなりました。 ページの遷移に問題はないのですが、他ページでは出来ているので何とかしたいと思っています。どうかお助け下さい。 ≪ロールオーバー≫ function initRollovers() { if (!document.getElementById) return var aPreLoad = new Array(); var sTempSrc; var aImages = document.getElementsByTagName('img'); for (var i = 0; i < aImages.length; i++) { if (aImages[i].className == 'imgover') { var src = aImages[i].getAttribute('src'); var ftype = src.substring(src.lastIndexOf('.'), src.length); var hsrc = src.replace(ftype, '_o'+ftype); aImages[i].setAttribute('hsrc', hsrc); aPreLoad[i] = new Image(); aPreLoad[i].src = hsrc; aImages[i].onmouseover = function() { sTempSrc = this.getAttribute('src'); this.setAttribute('src', this.getAttribute('hsrc')); } aImages[i].onmouseout = function() { if (!sTempSrc) sTempSrc = this.getAttribute('src').replace('_o'+ftype, ftype); this.setAttribute('src', sTempSrc); } } } } ≪画像切り替え≫ window.onload = function(){ var num = 1; setInterval(function(){ document.getElementById('link' + num).style.display = 'none'; num = document.getElementById('link' + (num+1))? ++num : 1; document.getElementById('link' + num).style.display = 'block'; },7500); }

  • ジャバスクリプトの使い方

    現在、webサイトを製作中なのですが、ページの上部にメニューがあり、画面中央にロゴがあり、下部にはフッターがあるという画面構成を考えております。 上部のメニューにマウスポインタが乗ったときに、中央のロゴが消えて、上部メニューの説明を表示しようと思っています。 その際、マウスオーバーで対応しようと思っています。 以下、ジャバスクリプトのコードです。 ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー window.onload = function () { 　document.getElementById( "logo" ).onmouseover= setlogo; document.getElementById( "myMenu1" ).onmouseover = setMyBody1; document.getElementById( "myMenu2" ).onmouseover = setMyBody2; document.getElementById( "myMenu3" ).onmouseover = setMyBody3; document.getElementById( "myMenu4" ).onmouseover = setMyBody4; document.getElementById( "myMenu5" ).onmouseover = setMyBody5; 　document.getElementById( "myMenu6" ).onmouseover = setMyBody6; 　document.getElementById( "myMenu7" ).onmouseover = setMyBody7; }; function setlogo() { setNoneAll(); document.getElementById( "logo" ).style.display = "block"; } function setMyBody1() { setNoneAll(); document.getElementById( "myBody1" ).style.display = "block"; } function setMyBody2() { setNoneAll(); document.getElementById( "myBody2" ).style.display = "block"; } function setMyBody3() { setNoneAll(); document.getElementById( "myBody3" ).style.display = "block"; } function setMyBody4() { setNoneAll(); document.getElementById( "myBody4" ).style.display = "block"; } function setMyBody5() { setNoneAll(); document.getElementById( "myBody5" ).style.display = "block"; } function setMyBody6() { setNoneAll(); document.getElementById( "myBody6" ).style.display = "block"; } function setMyBody7() { setNoneAll(); document.getElementById( "myBody7" ).style.display = "block"; } function setNoneAll() { document.getElementById( "logo" ).style.display = 　document.getElementById( "myBody1" ).style.display = document.getElementById( "myBody2" ).style.display = document.getElementById( "myBody3" ).style.display = document.getElementById( "myBody4" ).style.display = document.getElementById( "myBody5" ).style.display = 　document.getElementById( "myBody6" ).style.display = 　document.getElementById( "myBody7" ).style.display = "none"; } ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー 上記のジャバスクリプトでマウスオーバー（上部メニューにマウスポインタが乗った場合中央のロゴが消えてメニューの説明が表示されます）が可能になるのですが、更にonMouseOutを使って、上部メニューからマウスポインタが離れたときに、中央にロゴを表示させる為の記述方法が分からなくて苦戦しております。 どなたかご指導頂けませんか？ よろしくお願い致します。

  • java scriptで読み込むtxtでリンクする

    java scriptを使って外部テキストデータをhtml内に表示させることはできたのですが、そのテキストからさらに別ページへのリンクを貼る方法はあるでしょうか？ ■java script内 var data = [ [2010.12.12,ここにコメント], [2010.11.11,'ここにコメント'], [2010.10.10,'ここにコメント'] ]; ※ここにコメントの全文または一部分をリンクさせたいです。 ■html内 <script type="text/javascript" src="data.js"></script> <script type="text/javascript"> for(var i=0;i<data.length;i++) document.write(data[i][0]+'&nbsp; &nbsp;'+data[i][1]+'<br>'); </script> よろしくお願いします。

  • javascript getelementsbytagnameについてです。

    var keisan=document.getElementsByTagName('input'); for(i=0;i<=keisan.length;i++){ if(keisan[i].getAttribute('value').match('Click')){ keisan[i].onclick=add(); } } function add() { var a = document.getElementById('number1').value; var b = document.getElementById('number2').value; var c = a - -b; alert(c); } 上のプログラムを入れると、"keisan[i]はnullです"といったエラーがでます。 kaisan.length=0になっているみたいです…。 xhtmlだと作動するのですが、htmlだと作動しません。 対応してないのでしょうか？ 宜しくお願いいたします。

  • ジャバスクリプトをIE5.5以下には読み込ませないようにするには？

    いま、サイトの方にjqueryなどを入れて遊んでいるのですが、 一部のものでIE5.5以下のブラウザでエラーがでてしまい、 ページ内でとまってしまいます。 いっその事、IEの６以降とFirefoxやOpera,などには読み込ませて、 IEの5.5以下にはジャバスクリプトを 読み込ませないようにしようとおもうのですが、 色々サイトをみてまわってみたのですが ちんぷんかんぷんです・・・・ 今現在、 <script type="text/javascript" src="js/abc.js"></script> という形で外部ファイルとしてページのヘッダー内よりリンクしています。 そして、abc.js　より以下の形で 色々なJSファイルを読み込んでおります。 ////////////// abc.js ////////////////// var uri="http://www.xxx.com/js/"; function myfile(n) { this.length = n; for (i = 0; i < n; i++) { this[i] = null } } var n = 3; var file = new myfile(n) file[0] = "jquery.js"; file[1] = "interface.js"; file[2] = "thickbox.js"; for (i = 0; i <n; i++) { document.write('<script type="text/javascript" charset="utf-8" src="',uri,file[i],'"></script>'); } ////////////// ここまで ////////////////// できれば、ページのヘッダー内に書き込む形ではなく このabc.jsの中でブラウザの判定をして IEの６以降とその他のブラウザだけに読み込ませるように できるとうれしいのですが・・・・ ちなみにこのabc.jsというのは http://www15.plala.or.jp/mi-u/website/jsexternal/ext003.html こちらを参考にさせて頂きました。 宜しくお願い致します。

  • ASP.NETマスターページでのJAVA使用

    お世話になります 現在下記にてhtmlで画像表示をランダム表示していますが ASP.NETのマスターページを使用して表示するにはどうしたらいいですか？ マスターページはscript可ですが aspxは <body>不可？です 今は再生されないままです <html> <head> <script type="text/javascript"> var movieList = ['01.wmv', '02.wmv', '03.wmv', '04.wmv', '05.wmv', '06.wmv'] ; var currentMovie = 0 ; Array.prototype.shuffle = function() { for (var i = this.length, p; i > 0; --i) { this.push(this[p = Math.floor(Math.random()*i)]) ; this[p] = this[i-1] ; this[i-1] = this.pop() ; } return this ; } onload = function() { movieList.shuffle() ; document.getElementById('WMP').FileName = movieList[0] ; } </script> </head> <body> <embed name="WMP" id="WMP" type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" width="224" height="134" showcontrols="0"></embed> <script for="WMP" type="text/javascript" event="PlayStateChange(lOldState, lNewState)"> if (lOldState == 6 &amp;&amp; lNewState == 0) { if (++currentMovie >= movieList.length) currentMovie = 0 ; setTimeout(function() {document.getElementById('wmp').FileName = movieList[currentMovie] ;}, 0) ; } </script> </body> </html>

  • JavascriptのJQuery UI Tabsで、HTML入りのTabをaddするには?

    JavascriptのJQuery UIのTabsに関する質問です。 以下のURL ​http://www.pharos-ei.com/mike/jquery/examples/ui.tabs.html​ 中の "Triggering, Enabling, Disabling, Adding and Removing Tabs"の項目についてです。 ここで、Append new tabを押すと新たなタブが出来上がりますが、 その時にHTMLを含んだタブを表示したいのですがうまくいきません。 (現状、Append new tabを押したときに白紙のタブが開いているが、 タブを開いた時に、本文を動的に生成して書き込みたい。) 私が考えたのは、 id="new-tab"のdivがHTML内に出来ているので、 そこにdocument.getElementById(new-tab).innerHTMLとする方法でした。 しかし、これがうまくいかない状況です。 どなたか、addで生成したTabにHTMLを書き込む方法をご教授下さい。 具体的には、上記リンクを参考して次のコードを書きました。 ------------------------------------------------- var num = 1; var lavel = '#tab' + num; // ↓#tab1が生成される。ここまではできました。 $('#container-9 > ul').tabs('add', lavel, 'New Tab'); var divid = '"tab' + num + '"'; // ↓これがうまく動きません… document.getElementById(divid).innerHTML = 'ああああああ'; ---------------------------------------------------- 何卒、宜しくお願いします。

  • あるscriptを使うとIEだけ横スクロール

    こんにちは。 質問させていただきます。 下記URLのJavascriptでタブ切り替えをしています。 http://nais.to/~yto/tools/css_tabs/ 導入事態はとても簡単に出来たのですが、 何故かIEで表示するとブラウザ全体に横スクロールが出てしまいます。 上記のスクリプトを切ると横スクロールは消えます。 javascriptの中身はこんな感じです。 // bpref = tab body prefix, hpref = tab header prefix function seltab(bpref, hpref, id_max, selected) { if (! document.getElementById) return; for (i = 0; i <= id_max; i++) { if (! document.getElementById(bpref + i)) continue; if (i == selected) { document.getElementById(bpref + i).style.visibility = "visible"; document.getElementById(bpref + i).style.position = ""; document.getElementById(hpref + i).className = "open"; } else { document.getElementById(bpref + i).style.visibility = "hidden"; document.getElementById(bpref + i).style.position = "absolute"; document.getElementById(hpref + i).className = "close"; } } } とても軽量で余計な機能も無いので気に入ってるんですが、 横スクロールを確認してからは他のスクリプトで対応してます。 jsにお詳しい方がいらっしゃれば、どうかご教授下さい。 よろしくお願いいたします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する