html、JavaScript

テキスト入力欄を2つ作り。（例えば左と右に配置）ボタンも作成する。左のテキスト入力欄に文字を入力し、ボタンを押したらその2つのテキスト入力欄に左から右へと繋がる文が表示されるようなプログラムを書きたいのですが・・・

下記のプログラムでとりあえず、2つのテキスト入力欄とボタンを作る事ができたのですが、左側のテキスト入力欄に文字を入力しても右側には左側と全く同じ文字が出てくるようになっています。
ここから修正は可能でしょうか？
↓

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>入力文字の編集</title> </head> <body> <textarea id="textin1" rows="4" cols="40"></textarea> <textarea id="textin2" rows="4" cols="40"></textarea> <input type="button" value="投稿" onclick="posttext()"> <br><br> <div id="textin1"></div> <div id="textin2"></div> <script> function posttext(){ let text = document.querySelector("#textin1").value; let text2 = document.querySelector("#textin2").value; let conb_text = text + text2; document.querySelector("#textin1").innerHTML = text; document.querySelector("#textin2").innerHTML = text; text = "textin1".slice(0,5); text2 = "textin2".slice(5,10);

    }
</script>

</body> </html>

m.ts10806

2020/08/24 02:36

タイトル＞html、JavaScript タグを繰り返しているだけで内容がありません。 >内容コードやエラーはマークダウンのcode機能を利用してご提示ください。 https://teratail.com/questions/238564 ＞解決済み？何もコメントつけられていないようですし、どう解決したのかが分かりません。お礼すらないのは失礼なのでは。 ※お礼よりフィードバックが欲しい回答者の方が多いかと思いますが https://teratail.com/help/question-tips#questionTips4-2

行動規範の内容に同意します

回答2件

html、JavaScript

正しくマークアップしてください。
html は視点を変えると、ブラウザに意図した表示をさせるため マークアップ言語で記述するプログラム と言えます。

textarea#textin1, div#textin1
textarea#textin2, div#textin2

id属性が重複しており、JavaScript 以前の問題になっています。

MDN id より

id グローバル属性は、文書全体で一意でなければならない識別子 (ID) を定義

投稿2020/08/24 01:21

AkitoshiManabe

総合スコア5434

ベストアンサー

JavaSxript
1function posttext(){
2
3//入力欄からテキストを取得
4let text = document.querySelector("#textin1").value;
5
6//テキストを分割
7text1 = text.slice(0,5);
8text2 = text.slice(5,10);
9
10//テキストをHTMLに入れる
11document.querySelector("#textin1").innerHTML = text1; 
12document.querySelector("#textin2").innerHTML = text1;
13
14}