Arrayオブジェクトとforms配列の操作方法について

このQ&Aのポイント
  • JavaScriptのArrayオブジェクトをカスタマイズして追加したGetFromArray()メソッドでforms配列を操作したいが、エラーが発生する。
  • document.formsは配列ではないため、参照することができない
  • 他のオブジェクトをカスタマイズする必要があるかもしれない
回答を見る
  • ベストアンサー

Arrayオブジェクトとforms配列

以下のスクリプトを実行すると、(2)の所で「document.forms.GetFromArray is not found」 のエラーとなります。(ブラウザはFirefox)。 意図としてはArrayオブジェクトをカスタマイズして追加したGetFromArray()メソッドでforms配列を操作したいのですが... エラーメッセージからすると、「document.formsは配列(Arrayオブジェクト)では無い」と言っているようです。 この方法でforms配列を参照する方法を教えて下さい。 あるいは、Arrayオブジェクトではない、他のオブジェクトをカスタマイズするのでしょうか?お願いします。 <html> <head> <script type="text/javascript"> <!-- Array.prototype.GetFromArray=function(func){ for(var i=0;i<this.length;i++){ func(this[i]); } } function disp1(h){ alert(h); } function disp2(h){ alert(h.name); } function run(){ var array=new Array('dog','cat','fish'); array.GetFromArray(disp1); //(1) OK document.forms.GetFromArray(disp2); //(2) エラー } //--> </script> </head> <body> <form name="test"> <input type="text" name="bunrui" value="分類">/ <input type="text" name="detail" value="詳細">/ <input type="button" value="実行" onClick="run();"> </form> </body> </html>

noname#181870
noname#181870

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

  • ベストアンサー
回答No.1

Minefield/Firefox 3.0b2preで再現しました。 http://developer.mozilla.org/en/docs/DOM:document.forms によるとdocument.formsは forms DOM Level 2 HTML: forms に定義されているようでMDCのドキュメントにはNodeListが返るとある一方で http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-1689064 を見ると,HTMLCollectionが返るとあります。 それならば、と HTMLCollection.prototype.GetFromArray = function(func){ //省略 }; と記述してみましたが,結論から言えばこれも失敗です。代入する地点ではエラーが出ないのですが, document.forms.GetFromArray(disp2); でそんな関数はない、と言われます。 ちなみにコレは NodeList.prototype.GetFromArray でも同様の現象になります。 参考: https://bugzilla.mozilla.org/show_bug.cgi?id=300519 https://bugzilla.mozilla.org/show_bug.cgi?id=14869 補足)当方の環境では14869のテストケースで,firstChildはgetElementsByTagNameなんてメソッドを持ちません といわれたので,検証時,document.getElementsByTagNameに書き換えてます で、私自身は良く調べていないので使い方は調べてないのですが, 結局 http://joyeur.com/2006/04/07/joyful-javascript#c000232 等ではラッパー(prototype.js - $A関数)を作成。Arrayに変換) する形を取っているようです

noname#181870
質問者

お礼

ご回答ありがとうございました。 コレ周りを取り巻く状況はわかりました。 JSの仕様なのか、実装によるものなのかはわかりませんが (タブン、IEでもエラーとなるのでJSの仕様かも)、 方針を変更したいと思います。

関連するQ&A

  • 配列の使い方

    JavaScript 初心者です。 下記ソースでinput type="text"でname="kazu1,name="kazu2"のように2個限定で使っているのですが将来的にDBから読んだ数分に変わる予定です。 その場合 eval(document.myForm.kazu1.value)+ の表現はどのように変えたらいいでしょうか。 配列の数はi7で持ってきています。 <script language="JavaScript"><!-- function ttlValue(i7){ goukei = eval(document.myForm.kazu1.value)+eval(document.myForm.kazu2.value); alert("sum "+goukei+"です"); } // --></script> </head> <table border=1> <tr> <td width="40%" ><input type="text" name="kazu1" value="10">%</td> <td width="40%" ><input type="text" name="kazu2" value="10">%</td> </tr> <tr> <td><input type="submit" name="button" value="keisan" onClick="ttlValue(2)" ></td> <td></td> </tr> </table> </form>

  • テキストボックスの値で配列の値を求めるには?

    やりたいと思っているのは、 (1) "INPUT" の値を入力。 (2) "koteichi" は他からの参照値。 (3) "goukei"に(1)と(2)の合計値。 (4) "total" に(3)の値に該当する配列の値。 (実際には配列の値を代入した式の答え。) という流れになります。 (3)まではなんとか分かるのですが、 (4)はどのように配列の値を代入すればいいのかが 分かりません。  なにぶん最近始めた初心者なので不規則な値は配列を使えばいいと解釈したのですが、まったく使い方を間違えているのでしょうか? こういった場合は別のやり方があるのでしょうか? どなたかよろしくお願いします。 <SCRIPT language=JavaScript1.1> <!-- rank = new Array(6); rank[0]=0; rank[1]=5;[rank2]=8;[rank3]=12;rank[4]=16;rank[5]=22; function calc(){ document.myform.goukei.innerText = eval(document.myform.INPUT.value) +eval(document.myform.koteichi.value); } // --> </SCRIPT> </HEAD> <BODY> <form name="myform"> <INPUT size="20" type="text" name="INPUT" value="0" onchange="calc()"/>+<INPUT size="20" type="text" name="koteichi" value="10">=<INPUT size="20" type="text" name="goukei" value="0"> <INPUT size="20" type="text" name="total" value="0"> </FORM> </BODY>

  • 配列変数について

    とても基本的なことなのですが <script l anguage = "JavaScript"> week = new Array("日", "月", "火", "水", "木", "金", "土"); hizuke = new Date( ); day = hizuke.getDay( ); document.write("今日の日付 = ", hizuke.getMonth( ) + 1, "月 ", hizuke.getDate( ), "日 ", week[ day ], "曜日" ); </script> このような配列変数ならば、new Date( )によって呼び出された日付に対応して week[ day ]のところが日付に変わることはわかります。 <head> <title> Java </title> <script language = "JavaScript"> function calc( ) { point = new Array( ); point[0] = ei.value * 1; point[1] = su.value * 1 ; point[2] = ko.value * 1; sum = 0; for( i = 0 ; i < 3 ; i ++) { sum += point[i ]; } goukei .val ue = sum; ave = sum / 3; heikin.value = ave; } </script> </head> <body> <hr> <br> 英語 <input type = "text" size = "8" name = "ei "> <br> <br> 数学 <input type = "text" size = "8" name = "su"> <br> <br> 国語 <input type = "text" size = "8" name = "ko"> <br> <br> <hr> <br> <input type = "button" value = "計算" onclick = "calc( )"> <br> <br>3教科合計 <input type = "text" size = "8" name = "goukei "> 点 : 平均点 <input type = "text" size = "8" name = "heikin"> <br> <br> <hr> </body> </html > このような平均点を求めるプログラムでも point = new Array( ); point[0] = ei.value * 1; point[1] = su.value * 1 ; point[2] = ko.value * 1; sum = 0; for( i = 0 ; i < 3 ; i ++) { sum += point[i ]; このように配列変数を使っているのですが、なぜ配列変数をこのように使っているのかが わかりません。 なぜ、平均点を出すときはnew Array( )の( )の中身は何もなくて、上記のような表現を しているのでしょうか? よろしくお願いします。。

  • 実行できず、エラーになってしまう(オブジェクトを指定してください。)

    下記のソースを実行した場合、エラーになってしまいます。 エラー個所がどうしてもわかりません。 どなたか教えていただけないでしょうか。 よろしくお願いします。 <html> <head> <script type="text/javascript"> <!-- function froms() { for (i = 0; i <= 5; i++) { document.writeln("<INPUT TYPE=\"text\" SIZE=\"2\" READONLY>\n"); document.writeln("<INPUT TYPE=\"text\" SIZE=\"9\" READONLY>\n"); document.writeln("<INPUT TYPE=\"text\" SIZE=\"10\" READONLY>\n"); document.writeln("<INPUT TYPE=\"text\" SIZE=\"3\" READONLY>\n"); } } // --> </script> </head> <body> <script type="text/javascript">forms();</script> </body> </html> -----------エラーメッセージ--------------- ライン :17(現在は22行です(<script type="text/javascript">forms();</script>)) 文字 :1 エラー :オブジェクトを指定してください。 コード :0 URL :保存している場所

  • formの配列をjsでカウントしたい

    お疲れ様です。 PHPで処理する用に <input type="checkbox" name="array[]" val="11111" />チェック1 <input type="checkbox" name="array[]" val="22222" />チェック2 <input type="checkbox" name="array[]" val="33333" />チェック3 とnameを配列にしておき、submitされたときに、 チェックされた項目のみをカウントして○件チェックされました。 とポップアップするようなスクリプトを書きたいのですが、 document.MyForm.array.value <-普通のテキストならこう書きますが、 配列の場合はどうかいたらよいのでしょうか? http://ml.php.gr.jp/pipermail/php-users/2005-August/027043.html のdocument.form1.elements[i]や document.forms['MyForm'].elements['str[1]'].value などの書き方も試してみましたが、 undefinedになってしまいます。 PHP側はいまあるままいじりたくないので、form内のname属性はそのままにしたいです。 このような場合、どう書けばチェックされたものだけをカウントすることができるのでしょうか? よろしくお願いします。

    • ベストアンサー
    • PHP
  • 配列の受け渡し

    失礼致します。 配列について困っていまして、質問させてください。 今、フォームデータとしてsubmitを押したときにjavascriptから配列をサーブレットに受け渡ししたいです。フォームを含めたソースは次のようになります。 <script> function submitArr(n) { var i = 0; var array = []; while(i<n) { array.push(variable); // variableはiの値に応じて変わる変数。 } document.frm.array.value = array; ☆ } </script> <form action="servlet" method="post" name="frm"> <input type = "submit" value = "submit" onClick="submitArr()"> <input type = "hidden" value = "" name="array"> ☆ </form> 次に、servlet側でこれを受け取ります。 String[] array = new String[n]; ★ while(i<n) { array[i] = req.getParameter(array[i]); ★ } 以上が本質的な部分だと思うのですが、☆および★の部分をどう書いたらいいかわかりません。 添え字も少しあやふやなのですが、 分かる人がおられましたら、教えていただけないでしょうか?

    • ベストアンサー
    • Java
  • テキストフォームの内容をページ内に表示する方法

    初めて質問します。 JavaScriptも初心者です。 初めてづくしで見苦しい点もあるかと思いますが、よろしくお願いします。 複数のテキスト入力欄に書き込まれた内容をページ内に表示したいと思い、下のようなコードを書いています。 ---------- <head> <title>test</title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Script-Type" content="text/javascript"> </head> <body> <script type="text/javascript"> <!-- function output(){ document.write(document.forms[0].text1.value); document.write("<br>"); document.write(document.forms[0].text2.value); document.write("<br>"); } // --> </script> <form action="#" name="form1"> <input type="text" name="text1"> <input type="text" name="text2"> <input type="button" value="output" onclick="output()"> </form> </body> </html> ---------- forms[0]以降、forms[1]、forms[2]…と同様に続けたいと思ってこのようにしたのですが、 function output()内の3行目でつまってしまうようです。 入力欄オブジェクトの指定方法がまずいのかも、とも思うのですが… Statement on line 6: Cannot convert undefined or null to Object というエラーメッセージが出ています。 自分で使うためのプログラムで、体裁にこだわるつもりはありません。 何かよい解決方法はないでしょうか。 どうかよろしくお願いします。

  • ループで連続したフォームの値を読み込む

    こんにちは ループで苦労しています。 nameが数字で連続したフォームがいくつかあり、それをループで読み取りたいのです。私が作ったものは以下のものです。でもエラーになります。どこが悪いのかどなたかご教授ください。 <script> function ggo(){ for (i=1; i<=3; i++){ document.write(document.forms["myFORM"].elements["k"+i].value); }} </script> <form name="myForm"> <input type="text" name="k0"><br> <input type="text" name="k1"><br> <input type="text" name="k2"><br> <input type="button" value="hai" onClick="ggo()"> </form> それから、余談ですが以下のスクリプトはループを1回にするとkipをエラー無しで読み込んでくれますが、2回以上にするとエラー表示とともに1度しか読み込んでくれませんなぜなのでしょうか?ひとつの書き込みにに1つの質問が原則なのでこちらの質問に答えていただける方がいらっしゃればそれもとてもありがたいです。欲張ってすいません。 <script> function ggo(){ for (i=0; i<=2; i++){ document.write(document.myForm.kip.value); } } </script> <form name="myForm"> <input type="text" name="kip"><br> <input type="button" value="hai" onClick="ggo()"> </form> ↓参照しました↓ http://oshiete1.goo.ne.jp/qa820843.html

  • オブジェクト配列

    <input type="hidden" name="list[0].hdnProductCd" value="00001"> <input type="hidden" name="list[1].hdnProductCd" value="00001"> <input type="hidden" name="list[2].hdnProductCd" value="00001"> とあって2行目のvalue値を取りたいのですが document.form.list[1].hdnProductCd.valueでとれませんでした。 (nullまたはオブジェクトではないと警告) わかるかたお願い致します。

  • フォーム内のオブジェクトを取得したい

    フォームタグ内のオブジェクトをphpで取得できないでしょうか。 たとえば <From Action"xxx.php" Post="Mothod"> <Input Type=Text Name=xxx> <Input Type=Text Name=xxx> <Input Type=Submit Name=xxx Value=送信> </Form> このようなフォームがあり「送信」を押下した際に、このフォームオブジェクトの要素を知りたいのです。 JavaScriptであれば document.forms[0].elements[0] で拾えたと思うのです。 よろしくお願いいたします。

    • ベストアンサー
    • PHP

専門家に質問してみよう