Html、JavaScript

前提・実現したいこと
課題を完成させる

ここに質問の内容を詳しく書いてください。
テキスト入力欄を2つ作り、ボタンを押したら2つのテキスト入力欄に入力された文字を繋げて画面上に表示するプログラムを書く。

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

試したこと

上記のプログラムを書いて、2つのテキスト入力欄は表示されたのですが、「ボタンを押したら2つのテキスト入力欄に入力された文字を繋げて表示する」というのがわかりません。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

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

回答2件

解決済みとなっていますが、

Chiba_mさんのおっしゃっている一つ目、二つ目を取得して繋げるというのは例えば以下のようなことです。

Javascript
1    //ひとつめのテキストエリアの中身を変数textに代入する
2  let text  = document.querySelector("#textin1").value;
3    //ふたつめのテキストエリアの中身を変数text2に代入する
4  let text2 = document.querySelector("#textin2").value;
5
6    //ふたつの中身をくっつける（出力するのは conb_text ）
7  let conb_text = text + text2;

投稿2020/08/20 00:27

phiar_poet

総合スコア230

ex025

2020/08/20 02:28

ありがとうございます。

Hide1489

2020/08/21 02:20

phiar_poetさんご教授ありがとうございます。とりあえず左のテキスト入力欄に書いたものを右のテキスト入力欄に同じ内容を表示させることはでいたのですが、同じ内容ではなく左のテキストに入力した続きを右のテキストに表示させるにはどうしたら良いでしょうか？文字数はなんでもいいのですが例えば、左側に1〜15文字表示させてその続きの16〜30文字表示させるには？例）①左側テキスト入力欄に→アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホ　と入力して投稿ボタンを押したら、左側にはア〜ソまで表示され、右側タ〜ホまで表示させたいのです。質問の意味が解りますでしょうか？下記のコードだと、左側に入力したものがそのまま右側に同じように表示されるようになっています。 <!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; text = text.slice(0,30); document.querySelector("#textin2").innerHTML = text; } </script> </body> </html>

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

ベストアンサー

id属性は、同じものを2回以上使うことができません。なので、二つのtextareaタグのid属性を違うもの(例えば、textin1とtextin2)にしてください。
つぎに、javascriptの

JavaScript
1let text = document.querySelector("#textin").value;

の部分を2行に増やして、それぞれで一つめ、二つ目のtextareaの値を取得してください。
あとは、二つの変数に入った文字列をつなげて出力するだけです。

投稿2020/08/18 14:41

ex025

総合スコア179

Hide1489

2020/08/20 00:11

Chiba_mさんご教授ありがとうございます。 id属性は、同じものを2回以上使うことができません。なので、二つのtextareaタグのid属性を違うもの(例えば、textin1とtextin2)にしてください。 ↑これは理解できました。つぎに、javascriptの let text = document.querySelector("#textin").value; の部分を2行に増やして、それぞれで一つめ、二つ目のtextareaの値を取得してください。あとは、二つの変数に入った文字列をつなげて出力するだけです。 ↑こちらがイマイチよく分からず苦戦しています。理解力低くてすいません汗 <!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="textin2"></div> <script> function posttext(){ let text = document.querySelector("#textin1").value; 2et text = document.querySelector("#textin2").value; text = text.slice(0,30); text = text.slice(0,30); document.querySelector("#textout").innerHTML = text; } </script> </body> </html>