テキストボックスに入力された要素をdocument.writeで別の場所に表示する方法

テキストボックスに入力された要素を別の場所に表示したいのですが
<form id="form1" action="#">
<input type="text" id="message" value="">
<input type="button" onclick="func1()" value="決定">
</form>
<div id="output_message"></div>
<script>
function func1() {
textA[0] = document.getElementById("message").value;
}
</script>

<script>document.write(textA[0]);</script>
このように書いたのですが動きません。何箇所にも同じように表示したいためdocument.writeを使って入力された文字を表示する方法を探しています。

No.2 ベストアンサー 回答者： fujillin 回答日時： 2020/02/25 13:04

こんにちは

＞document.writeを使って入力された文字を表示する方法を探しています。
残念ながら無理だと思います。
一旦、表示し終わったドキュメントに対して、document.writeを実行すると新しい文書として解釈されますので、それまでの表示がクリアされます。
そういうおつもりだったのなら、使えますけれど・・・
https://developer.mozilla.org/ja/docs/Web/API/Do …

ご提示のHTMLで、入力された値を
　<div id="output_message"></div>
に表示したいのとするなら、
function func1() {
document.getElementById("output_message").textContent = document.getElementById("message").value;
}
のような感じでできるはずです。

この回答へのお礼

<div id="output_message"></div>は入力確認用で書いたものが残っていたみたいです。
今現在let textA[0]="おはよう"；として<script>document.write(textA[0]);</script>
として表示しているので中の要素をユーザーに決めてもらえるようにしたくて書いています。
やはり難しいですか。ありがとうございます。

お礼日時：2020/02/25 14:01

No.1 回答者： yambejp 回答日時： 2020/02/25 12:57

「document.write」の使用がマストな条件なのでしょうか？

document.writeはブラウザによって実装が異なるのに加え
別の場所を指定することはほぼ不可能なので
非常に検証が難しいですが・・・

通常は所定の場所のtextContentを書き換えることで代替します

この回答へのお礼

今はもとのテキストにlet textA[0]="おはよう"としてdocument.writeで表示させているので中の要素を再代入することで書き換えられればなと思って書いていました。何箇所もtextA[0]を表示する必要があるので既存のコードを活かせないかと思って質問させていただきました。回答ありがとうございます。

お礼日時：2020/02/25 14:01