フォームタグのinputタグのカーソル移動時にエラーが発生します

このQ&Aのポイント
  • フォームタグのinputタグ内にカーソルを持っていくと、エラーが表示されます。
  • エラーの内容はオブジェクトが存在しないことを意味しています。
  • このエラーは、特定の環境(prototype.js(1.6)×IE(8))でのみ発生します。Firefoxではエラーが表示されません。
回答を見る
  • ベストアンサー

フォームタグのinputタグ内にカーソルを持っていくと、下記エラーとな

フォームタグのinputタグ内にカーソルを持っていくと、下記エラーとなります。環境は、 prototype.js(1.6)×IE(8)です。FFではエラー表示となりません。 エラーの意味と対処方を教えてください。 メッセージ: オブジェクトがありません。 ライン: 3936 文字: 5 コード: 0 URI: http://ほげほげ/prototype.js ▼該当と思われる行付近 3965行 function getEventID(element) { 3969行 if (element._prototypeEventID) return element._prototypeEventID[0]; 3970行 arguments.callee.id = arguments.callee.id || 1; 3971行 return element._prototypeEventID = [++arguments.callee.id]; 3972行 }

  • re999
  • お礼率61% (476/777)

質問者が選んだベストアンサー

  • ベストアンサー
  • think49
  • ベストアンサー率59% (285/482)
回答No.5

#2, 4 です。 (※以下、全てのコードの全角空白は半角空白に置換してください。) --------- /* Prototype JavaScript framework, version 1.6.1 * (c) 2005-2009 Sam Stephenson * * Prototype is freely distributable under the terms of an MIT-style license. * For details, see the Prototype web site: http://www.prototypejs.org/ * *--------------------------------------------------------------------------*/ ... // 4516行目  function observe(element, eventName, handler) {   element = $(element);   var responder = _createResponder(element, eventName, handler);   if (!responder) return element;   if (eventName.include(':')) {    if (element.addEventListener)     element.addEventListener("dataavailable", responder, false);    else {     element.attachEvent("ondataavailable", responder);     element.attachEvent("onfilterchange", responder);    }   } else {    var actualEventName = _getDOMEventName(eventName);    if (element.addEventListener)     element.addEventListener(actualEventName, responder, false);    else     element.attachEvent("on" + actualEventName, responder);   }   return element;  } --------- window だけ別処理にしているわけではなさそうです。 エラーが発生しない流れは、以下のようになると思います。 ------ function loadListener (event) {  var element = document.getElementById('undefined');  var firstChild = element.firstChild; // エラー: オブジェクトがありません。 } window.attachEvent('onload', loadListener); // 実行され、エラーが発生する window.attachEvent('ononload', loadListener); // 実行されないので、エラーも発生しない ------

re999
質問者

お礼

丁寧な解説、ありがとうございました。

その他の回答 (5)

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.6

横からですが… 質問文 >カーソルを持っていくと、下記エラーとなります。 #1の補足 >下記へ変更したら、エラーが表示されなくなりました。 からの推測ですが、 もしかして、何らかの処理をしたくて、スクリプトを設置しているわけではなくて、エラーが出ることだけが問題なので出なくしたいということのように感じられますが。 質問者様の文章のなかに、本来スクリプトで処理している機能が実現できているかいないかについての記載がまったくないので、ひょっとしてそのソースにはスクリプトが必要ないのではないかと思った次第です。 あるいは、少なくとも原因となっているイベント設定に関係する処理は不要であるとか? もしそうならば、関連するスクリプトの部分をはずしてしまうのが、修正するよりも簡単かと思います。 (関連する部分を特定することが、できないのかもしれませんが) スクリプトで処理する必要がまったくないのであれば、全部削除してしまうのが一番簡単です。 ( <script ~~> ~ </script> のタグを全部削除する ) 違っていたなら失礼。

  • think49
  • ベストアンサー率59% (285/482)
回答No.4

#2 です。 Google Chrome 5, IE8 で試してみましたが、onload は通りませんね…。 --------- <script type="text/javascript" src="./prototype-1.6.1.js"></script> <script type="text/javascript"><!-- Event.observe(window, 'load', function(event) { alert('window loaded (1)'); }); // 実行される Event.observe(window, 'onload', function(event) { alert('window loaded (2)'); }); // 実行されない //--></script> --------- 原因は別にあるのではないでしょうか。

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.3

Event.observe(window, 'load', function() { となっていた箇所を、下記へ変更したら、エラーが表示されなくなりました。 Event.observe(window, 'onload', function() { ==> 不可解ですね。Prototype.jsのEvent.observe() は、Event.observe(element, eventName, handler)の構文で、 eventNameにはonを取り去ったevent名をしていするはずなのに... http://api.prototypejs.org/dom/event/observe/ windowオブジェクトは、elementじゃないから特別なのかしら...

  • think49
  • ベストアンサー率59% (285/482)
回答No.2

■IE8「オブジェクトがありません」 ---- var element = document.getElementById('undefined'); // #undefined は存在しないので、null を返す // 行: 50 // エラー: オブジェクトがありません。 var firstChild = element.firstChild; ---- 正確にいえば、「TypeError: firstChildプロパティを持つオブジェクトが存在しません」です。 モダンブラウザならば、「TypeError: Cannot read property 'firstChild' of null」を返します。 「オブジェクトがありません」とあると、未定義の変数からプロパティを呼び出したように感じるかもしれませんが、実際はそうではなくデータ型のエラーです。 ■IE8「オブジェクトを指定してください。」 ---- hoge(); // オブジェクトを指定してください。 ---- IE8で未定義のオブジェクトを指定すると、「オブジェクトを指定してください。」のエラーを返します。 同じコードをモダンブラウザで実行すると、「ReferenceError: hoge is not defined」を返します。 ■対処法 「ライン: 3936」「文字: 5」なので、「3936行目の行頭から5文字目」付近をみてください。 掲示されたコードには3936行目を含まないので、判断が出来ません。 また、3936行目の関数をコールしている部分もみてください。 prototype.js の関数を呼び出しているコードがあるはずです。 原因としては、 ・IE8未対応のメソッドを使っている (undefined のプロパティを呼び出している) ・関数に不正な引数を渡している ・prototype.js のバグ のいずれかが考えられます。

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.1

エラーの意味と対処方を教えてください。 =>エラーの意味は、そのまんま「オブジェクトがありません。」 ですが、prototype.jsやIE(8)に原因がある事は、おそらくないでしょう。 他にjavascriptのライブラリーとかプラグインとかを使ってませんか、 といっても、そのライブラリーのバグが原因である事もまれでしょう。 ほぼ、あなたの使い方、が誤っているのだと思われます。 対処方 =>お使いのライブラリーもしくは、あなたがコーディングした部分だけ でも提示する事が出来れば、アドバイスできるかもしれません。 自分で調べるならIE8の開発者ツール(F12)を使って、所謂デバッグ という作業をしてください。

re999
質問者

補足

Event.observe(window, 'load', function() { となっていた箇所を、下記へ変更したら、エラーが表示されなくなりました。 Event.observe(window, 'onload', function() { 但し、loadやonloadの違いなど、分かっていません。 色々試し倒したうち、たまたまエラーが表示されなくなったのがこのやり方だった、というだけ です。 今後のためにも、今回の現象を理解しておきたいので、 上記内容で、今回のエラー原因、及び正しい対処方がどういうものか、 アドバイスいただけないでしょうか?

関連するQ&A

  • 下記の件、情報追記します。

    下記の件、情報追記します。 http://okwave.jp/qa/q6155162.html エラー内容。H is undefined Line 49 対象ファイル。jquery.tools.min.js 該当行記述内容。H=Object.prototype.toString; これってどういう意味ですか? Object.prototypeがないってことですか? Object.prototypeを定義するにはどうしたらよいですか?

  • prototype.js で $ is not defined になってしまう!

    JSバージョン:prototype1.6 ブラウザ:Firefox2.0、IE7.0 OS:WinXPpro でシンプルに <html> <head> <title>$ - 指定idのエレメントを取得</title> </head> <script type="text/javascript" src="/js/prototype.js?aaads"></script> <script type="text/javascript"> function test1() { var element = $('div1'); alert(element.innerHTML); } </script> <body> <div id="div1">DIV1の中身</div> </body> </html> を実行したところ、$ is not defined と エラーになってしまいます。 あるレンタルサーバにUPして動かすと問題なく、 ローカルPCで実行するとエラーになってしまうようです。 どなたか教えて下さい!!!

  • ジャバスクリプトのエラーを直したい

    趣味で準備中のブログを表示すると、 「ページでエラーが発生しました。」と出るようになってしまいました。 ダブルクリック後に出てくる表示が、 ライン:172 文字:2 エラー:オブジェクトがありません。 コード:0 URL:http://○○○.com とあり、firefoxのエラーコンソールから見てみると、 「list is null」で、171行目が表示されていました。 何かが空になっているとか、そんな意味だと思うのですが、 文のどこが変なのかサッパリ分からない状態です。 以下が、構文の前後です。 setStyle = function(element, key, value) { element.style[key] = value; } getStyle = function(element, key) { return element.style[key]; } cleanWhitespace = function(list) { var node = list.firstChild;  【←この行が変みたいです。】 while (node) { var nextNode = node.nextSibling; if(node.nodeType == 3 && !/\S/.test(node.nodeValue)) { list.removeChild(node); } node = nextNode; } return list; } 分かる方、いらっしゃったら教えていただけると幸いです。 よろしくお願いします。

  • input type="file"のvalue監視

    input="file"のvalue値が変更されたら別のテキストフィールドに表示するというScriptを書いたのですが動作してくれません。 input="file"ではなく普通のテキストフィールドならば動作します。 fileフィールドでは動作しないのでしょうか。それとも書き方がまずいのでしょうか。 以下、ソースです。 <html> <head> <title>test</title> <script type="text/javascript" src="/javascript/prototype.js"></script> </head> <body> <form action="" enctype="multipart/form-data" method="post"> <input id="file_test" name="file_test" type="file"> <br> <div id="result">表示</div> <script type="text/javascript"><!-- window.onload = function() { new Form.Element.Observer('file_test', 1, function(element, value) { document.getElementById('result').innerHTML = value; }); } //--></script> </form> </body> </html> よろしくお願いします。

  • is not a functionというエラー

    jqueryのスクリプトを書いていたところ $(function () { var wrapper = $("#main"); var wrapperWidth; var blocks = []; NewBlocks(blocks, wrapper.children()); function NewBlocks(blocks, elements) { for (var i = 0; i < elements.length; i++) { var element = elements[i]; var block = new Block(element); blocks.push(block) } } function Block(element) { this.element = element; element.style.margin = "10px"; this.init(); } Block.prototype = { init: function () { this.width = this.element.offsetWidth; this.height = this.element.offsetHeight; } } }); 上記スクリプトを実行すると「this.init is not a function」というエラーが出てしまいます。 一体何をどう間違っているせいでエラーが出るのか、どうかご教授いただけますでしょうか。

  • (javascript, Ajax)IE7.0でのselectタグのプロパティについて

    Javascriptで困っています。 詳しい方、是非教えて下さい。 HTMLのselectタグの内容が変更された時に処理を行う Ajaxプログラムを書いています。 selectタグにid属性を付けて、id="selectPref"という 名称にしています。 インクルードした.jsファイルで、このselectPrefオブ ジェクトが変更された時の処理を記述したいのですが、 変数に、 selectPref.valule を代入した時点でランタイムエラーが発生します。 「"selectPref"は宣言されていません」 というメッセージ内容です。 しかし、その数行前のイベントハンドラで、selectPref オブジェクトの値に変更があった事はちゃんと検知で きています。 何が悪いのでしょうか? なお、本件は、IE7.0で起こっている現象です。 Firefox3.0.4では、正常に(期待通りに)動作してい るので、余計にIEで動かない理由が分かりません。 教えて頂けましたら幸いです。 以下、ソースから必要箇所のみ抜粋します。 ==メインのHTML== Headerセクション <script type="text/javascript" src="lib/prototype.js"></script> <script type="text/javascript" src="registration1.js"></script> BodyセクションのFormタグ内 <select size="1" id="selectPref"> <option selected value="0">▼都道府県を選択</option> </select> ==インクルードした.jsファイル== prototype.jp は、version 1.6.0.3 registration1.jpは、下記の通り。 onload = init; var pref_id; function init() { $("selectPref").onchange = prefDisp; //←この行は動いている } function prefDisp() { pref_id = selectPref.value; //←この行がエラー } ==以上==

  • Javascriptリアルタイムエラーチェック

    Javascript初心者です。 本を見ながらフォームの入力値のリアルタイムエラーチェックを実装しています。 テキストフィールドへの入力値の妥当性検証はできるのですが、 チェックボックスが一つもチェックされていなかった場合にチェックボックスを囲むfieldsetを赤くさせるのがうまくいきません。 電話番号の形式指定ならば String.prototype.isZip = function(){ return this.isEmpty()||/^\d{3}-\d{4}$/.test(this); } という形です。thisはname属性を参照します。 すべての項目にエラーがない場合に確認画面へ進めるようにしています。 String.prototype.isNotEmpty = function() { return this != ''; } String.prototype.isEmpty = function(){ return this == ''; } String.prototype.isShorterThan = function(n){ return this.length<=n; } String.prototype.isLongerThan = function(n){ return this.length >= n; } String.prototype.isZip = function(){ return this.isEmpty()||/^\d{3}-\d{4}$/.test(this); } String.prototype.isPhone = function() { return this.isEmpty()||/^\d{2,4}-\d{1,4}-\d{4}$/. test(this); } String.prototype.isEmail = function() { return this.isEmpty()||/^([\w-]+\.?)+@[\w-]+(\.([\w-]+))+$/.test(this); } var formValidation = function(name, feedback, fields){ var form = document.forms[name]; for (var i=0; i<form.elements.length; i++){ (function(){ var elm = form.elements[i]; var f = fields[elm.name]; if (f){ f.element = elm; f.process = function(){ var ok = true; if (f.convert) f.element.value = f.convert(f.element.value); if (f.validation) ok = f.validation(f.element.value); if (f.feedback) f.feedback(ok, f.element); return ok; } elm.onblur = function(e){ f.process() } } })(); } form.onsubmit = function(){ var all_ok = true; for (key in fields) if (fields[key] && !fields[key].process()) all_ok = false; return feedback(all_ok); }; } </script> <script type="text/javascript"> <!-- <![CDATA[ window.onload = function(){ var fields = { 'last_name':{ convert: function(val){ return val.cnvKana('asKV').trim() }, validation: function(val){ return val.isNotEmpty() && val.isShorterThan(16) }, feedback: function(ok, elm){elm.style.border = ok ? 'solid 2px #3CB371' : 'solid 2px f57272'; } }, 'furigana':{ convert: function(val){ return val.cnvKana('sKVC').trim() }, validation: function(val){ return val.isNotEmpty() && val.isComposedOf(cs.kata.zen+cs.space.han) && val.isShorterThan(32) }, feedback: function(ok, elm){ elm.style.border = ok ? 'solid 2px #3CB371' : 'solid 2px f57272'; } }, 'phone':{ convert: function(val){ return val.cnvPhone() }, validation: function(val){ return val.isNotEmpty() && val.isPhone() }, feedback: function(ok, elm){elm.style.border = ok ? 'solid 2px #3CB371' : 'solid 2px f57272';} } 'email':{ convert: function(val){ return val.trim() }, validation: function(val){ return val.isNotEmpty() && val.isEmail() }, feedback: function(ok, elm){ elm.style.border = ok ? 'solid 2px #3CB371' : 'solid 2px f57272';}, }, }; var feedback = function(ok){ if (ok) alert("確認画面へ進みます。"); else alert("フォームの内容に不備があるようです。再度の確認をお願いいたします。") return ok; }; new formValidation('MAINFORM', feedback, fields); } // ]]> --> <form name="MAINFORM" action="check.php" method="post"> <input name="last_name" type="text"> <input name="furigana" type="text" /> ~~~~~~ <fieldset id="checkboxDemo" name="job"> <legend><img src="images/label_kozanaiyou.gif" width="92" height="18"></legend> <label for="checkbox-1" tabindex="1">オフィス(Word,Excel)</label> <input type="checkbox" name="kouza[]" id="checkbox-1" value="オフィス(Word,Excel)" /> <label for="checkbox-2" tabindex="2">ネットワーク構築</label> <input type="checkbox" name="kouza[]" id="checkbox-2" value="ネットワーク構築" /> <label for="checkbox-3" tabindex="3">WEBデザイン</label><input type="checkbox" name="kouza[]" id="checkbox-3" value="WEBデザイン" /> <label for="checkbox-4" tabindex="4">WEBプログラミング</label> <input type="checkbox" name="kouza[]" id="checkbox-4" value="WEBプログラミング" />  </fieldset> 自分で色々と試してみましたがうまくいかず、皆様のお力を借りたいと思い投稿しました。 詳しい方教えてください。

  • どれか一つのinputが消えても合計を出したい

    javascriptで値段を計算させるものを作ったのですが、 HTMLの方で計算する対象が無くなるとエラーが発生してしまいます。 エラーが出ないように組んでないので当たり前なのですが^^; どれかひとつの<input name="h0X" />を消しても問題なく合計金額を出せる ようにする方法が分かりません。ご存じでしたらお教え願います。 ---------------------[keisan.js]----------------------- function total(){ var f1=document.forms["form"].elements; var j01=f1["h01"].value.split(",").join("")-0; var j02=f1["h02"].value.split(",").join("")-0; var j03=f1["h03"].value.split(",").join("")-0; f1["name_boxtotal"].value=setComma(j01+j02+j03+""); } ---------------------[test.html]----------------------- <html> <head> <script src="keisan.js"></script> </head> <body> <input name="h01" /> <input name="h02" /> <input name="h03" /> <div onclick="total()">合計</div> </body> </html> -------------------------------------------------

  • Struts の logic タグの使い方?

    Action でセッションにオブジェクトのリストを登録し、その後、Show.jsp 側でセッションにオブジェクトのリストがある場合は、そのリストを表示するプログラムを作ろうとしています。 実行すると スコープ request にBean ActionFormForSearchResult がありません とエラーになってしまいます。 ActionFormForSearchResult は、オブジェクトのリストを表すオブジェクトで Action が呼び出されたときにセッションに登録します。 jsp の記述は、次のような感じです。 <logic:iterate id="element" name="ActionFormForSearchResult" scope="request"> ><bean:write name="element" property="intCorporationCode" /> </logic:iterate> よろしくお願いします。

    • ベストアンサー
    • Java
  • 個別では動く、javascriptのエラー

    こちらで良いのか悩みましたが..... blogやHPを作った事があるというだけで、webshopの作りを友人にお願いされた初心者です。 更新履歴用にFeed2JS、商品画像を表示する為にmootools、lightbox2をお借りして 設置までは何とか行う事が出来、個別ではちゃんと動いているのですが、同じページではどちらかが動かなくなってしまいました。 ブラウザにエラーコンソールを付けてみた所、mootoolsとrssにエラーがあると表示されていて、 どの行がエラーなのかは分かりましたが、情けない話ですが何がエラーなのかが分かりません。 javascriptは見よう見まねで設置しており、コードの書き換えなどは画像サイズを変更するぐらいがやっとです。 ネットや辞書で調べてみましたが、分からないまま弄ると余計におかしな事になり、怖くなってきました。 周りに詳しい人もおらず、困ってしまいましたので、検索でみつけたこちらでお伺いする事にした次第です。 エラー表示されるのは $(document).ready( function(){ $('.rss-items').innerfade({ animationtype: 'slide', speed: 750, timeout: 6000, type: 'sequence', containerheight: '1em' }); $('ul#portfolio').innerfade({ speed: 1000, timeout: 5000, type: 'sequence', containerheight: '220px' }); $('.fade').innerfade({ speed: 1000, timeout: 6000, type: 'random_start', containerheight: '1.5em' }); $('.adi').innerfade({ speed: 'slow', timeout: 5000, type: 'random', containerheight: '150px' }); }); の3行目 $('.rss-items').innerfade({ 長いので直接アドレスを貼ります http://pretto.kilo.jp/cos-pretto/js/mootools-1.2-core.js 345行目 Fx.Slide=new Class({Extends:Fx,options:{mode:'vertical'},initialize:function(a,b){this.addEvent('complete',function(){this.open=(this.wrapper['offset'+this.layout.capitalize()]!=0);if(this.open&&Browser.Engine.webkit419)this.element.dispose().inject(this.wrapper)},true);this.element=this.subject=$(a);this.parent(b);var c=this.element.retrieve('wrapper');this.wrapper=c||new Element('div',{styles:$extend(this.element.getStyles('margin','position'),{'overflow':'hidden'})}).wraps(this.element);this.element.store('wrapper',this.wrapper).setStyle('margin',0);this.now=[];this.open=true},vertical:function(){this.margin='margin-top';this.layout='height';this.offset=this.element.offsetHeight},horizontal:function(){this.margin='margin-left';this.layout='width';this.offset=this.element.offsetWidth},set:function(a){this.element.setStyle(this.margin,a[0]);this.wrapper.setStyle(this.layout,a[1]);return this},compute:function(a,b,c){var d=[];var x=2;x.times(function(i){d[i]=Fx.compute(a[i],b[i],c)});return d},start:function(a,b){if(!this.check(arguments.callee,a,b))return this;this[b||this.options.mode]();var c=this.element.getStyle(this.margin).toInt();var d=this.wrapper.getStyle(this.layout).toInt();var e=[[c,d],[0,this.offset]];var f=[[c,d],[-this.offset,0]];var g;switch(a){case'in':g=e;break;case'out':g=f;break;case'toggle':g=(this.wrapper['offset'+this.layout.capitalize()]==0)?e:f}return this.parent(g[0],g[1])},slideIn:function(a){return this.start('in',a)},slideOut:function(a){return this.start('out',a)},hide:function(a){this[a||this.options.mode]();this.open=false;return this.set([-this.offset,0])},show:function(a){this[a||this.options.mode]();this.open=true;return this.set([0,this.offset])},toggle:function(a){return this.start('toggle',a)}}); です。 マヌケな質問かもしれませんが、参考になるページだけでも教えて頂けると凄く嬉しいです。