テキストフォームの内容をページ内に表示する方法

解決済

質問者：orionnosu
質問日時：2008/10/22 02:05
回答数：2件

初めて質問します。
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">

</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
というエラーメッセージが出ています。
自分で使うためのプログラムで、体裁にこだわるつもりはありません。
何かよい解決方法はないでしょうか。
どうかよろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： redfox63
回答日時：2008/10/22 02:35

docuemnt.writeで出力すると出力した時点で既存のコードを破壊してしまいます

つまり 1行目の時点では <BODY>や<FORM>があるのですが writeメソッドから戻った時点で破壊されています
2行目は単なる文字列の出力なので続行できます
3行目はすでに破壊された formsを探そうとするのでエラーになるのです

DIVタグやSPANタグなどを設けてinnerHTMLへ設定してみましょう

<div id="TextOut"></div>
といった具合に設置しておいて

<script type="text/javascript">

</script>
といった具合で出来るかと …
字下げには全角スペースを使用しています

- 0
- 件

通報する

この回答へのお礼

＞docuemnt.writeで出力すると出力した時点で既存のコードを破壊してしまいます
＞つまり 1行目の時点では <BODY>や<FORM>があるのですが writeメソッドから戻った時点で破壊されています

ここが全然わかってなかったです。そう言われてみれば理解できました。
書いていただいたコードを試してみます。
的確なアドバイスありがとうございました！

通報する

お礼日時：2008/10/22 10:25

No.1

回答者： notnot
回答日時：2008/10/22 02:33

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を部分的に書き換えるか。