![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
初めて質問します。
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
というエラーメッセージが出ています。
自分で使うためのプログラムで、体裁にこだわるつもりはありません。
何かよい解決方法はないでしょうか。
どうかよろしくお願いします。
No.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>
といった具合で出来るかと …
字下げには全角スペースを使用しています
>docuemnt.writeで出力すると出力した時点で既存のコードを破壊してしまいます
>つまり 1行目の時点では <BODY>や<FORM>があるのですが writeメソッドから戻った時点で破壊されています
ここが全然わかってなかったです。そう言われてみれば理解できました。
書いていただいたコードを試してみます。
的確なアドバイスありがとうございました!
No.1
- 回答日時:
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するというのもありだなと思っています。
ありがとうございました!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript セレクトボックスを2つ設けて選択して初めてメッセを表示 1 2022/07/27 12:15
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
- PHP PHPのエラーの解消法について教えて下さい。 1 2023/02/06 10:48
- PHP 入力した部分を表示させたまま(保持)するにはどうすれば良いでしょうか? 1 2023/01/25 11:14
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript javascript作成してます。ラジオボタンで判定するコードを書いてます。 1 2023/07/18 11:03
- PHP PHPでCookieを使った訪問回数について 1 2023/05/28 14:10
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript javascriptのちょっとした動作不良(原因は突き止めたのですが) 1 2023/06/15 19:58
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
window.openでタイトル名の指定
-
ホームページに日付を自動更新...
-
JavaScriptの件で、質問させて...
-
セレクトボックスの内容に応じ...
-
ランダムで文字を表示
-
比較演算子について
-
ActiveXobjectが作成できない
-
同じIDで定義した要素の配列を...
-
functionから別のfunctionを実...
-
<a>タグのテキストを取得
-
この将棋プログラムに王様ゲッ...
-
関数でy=g(x)のgとは何の略です...
-
C#OpenCv V4にのエラーに関する...
-
document.onkeydownについて
-
ローカルにあるファイルを検索...
-
なぜmatchメソッドがエラーにな...
-
jspからjavascriptの変数引継ぎ
-
助けてください‼︎ javascriptで...
-
javascriptでスロットゲームを...
-
javascriptでテーブルに追加し...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
window.openでタイトル名の指定
-
○歳△ヶ月と×日を計算してくれる...
-
時間帯によって背景画像を変える
-
なぜ、ジャバスクリプトが表示...
-
document.open()の意味とは
-
前のページに戻るとページトッ...
-
for文のiを使ってリンク先のア...
-
HpのFlashで,ブロック回避の方...
-
JavaScriptで乱数+乱数の計算結...
-
カウントダウン JavaScript の ...
-
来年の今日の曜日・・・?
-
「分」単位で加算(減算)したい。
-
javascriptをはじめて勉強して...
-
javascriptとphpの連携で疑問
-
ウェブ上にキーボードを作りた...
-
初歩的なことなんですけど
-
コンマとクオーテーションマー...
-
JavaScriptでFirefox使用者の閲...
-
innerHTMLにて設定した情報を再...
-
document.openの意味
おすすめ情報