- ベストアンサー
テキストフォームの内容をページ内に表示する方法
初めて質問します。 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 というエラーメッセージが出ています。 自分で使うためのプログラムで、体裁にこだわるつもりはありません。 何かよい解決方法はないでしょうか。 どうかよろしくお願いします。
- orionnosu
- お礼率100% (2/2)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
docuemnt.writeで出力すると出力した時点で既存のコードを破壊してしまいます つまり 1行目の時点では <BODY>や<FORM>があるのですが writeメソッドから戻った時点で破壊されています 2行目は 単なる文字列の出力なので続行できます 3行目はすでに破壊された formsを探そうとするのでエラーになるのです DIVタグやSPANタグなどを設けてinnerHTMLへ設定してみましょう <div id="TextOut"></div> といった具合に設置しておいて <script type="text/javascript"> <!-- function output(){ var objDiv; objDiv = document.getElementById("TextOut"); // 前の出力を消すなら次の行を実行しましょう // objDiv.innerHTML = ""; objDiv.innerHTML += document.forms[0].text1.value; objDiv.innerHTML += "<br>"; objDiv.innerHTML += document.forms[0].text2.value; objDiv.innerHTML += "<br>"; } // --> </script> といった具合で出来るかと … 字下げには全角スペースを使用しています
その他の回答 (1)
- notnot
- ベストアンサー率47% (4900/10358)
HTML内に書かれたJavaScriptでウィンドウ自体を書き換えてしまう訳なので無理があるかと。 function output(){ var t1=document.forms[0].text1.value; var t2=document.forms[0].text2.value; document.write(t1); document.write("<br>"); document.write(t2); document.write("<br>"); } と、一旦変数に入れれば表示は出来ますが、関数が終わって戻る場所がないので読み込み中のままになりますね。 別ウィンドウを開いてそこにdocument.writeするか、DOMで元のHTMLを部分的に書き換えるか。
お礼
回答ありがとうございます。 ＞ウィンドウ自体を書き換えてしまう そういうことだったんですね。 別ウィンドウにdocument.writeするというのもありだなと思っています。 ありがとうございました！
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/images/related_qa/c205_2_thumbnail_img_sm.png)
お礼
＞docuemnt.writeで出力すると出力した時点で既存のコードを破壊してしまいます ＞つまり 1行目の時点では <BODY>や<FORM>があるのですが writeメソッドから戻った時点で破壊されています ここが全然わかってなかったです。そう言われてみれば理解できました。 書いていただいたコードを試してみます。 的確なアドバイスありがとうございました！