２つのtextareaでそれぞれ入力した内容が相互に反映されるようにしたい

前提・実現したいこと

boxA、boxBそれぞれのdivにあるtextareaに入力した内容が、相互に反映されるようにしたいと思っています。
具体的には、以下のようなことを実現したいと思っております。
・boxAのtextareaに入力したテキストを、/\n\n/gで分割した上で、boxBのtextareaに表示
・boxBのtextareaで編集したテキストを、再度/\n\n/で結合し、boxAのtextareaに表示

なぜ下記のコードで上手くいかないのか、その原因と対応策をご教示頂ければ幸いです。

発生している問題

boxAからboxBへの反映は上手くいくのですが、boxBでテキストを編集してもboxAに反映されません。
Chromeのdeveloper toolで見ると、html上は反映されているように見えるのですが、画面では何も変化がないようです。

該当のソースコード

javascript
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="UTF-8" />
5    <title>my Memo's Pad</title>
6    <link rel="stylesheet" href="css/reset.css" />
7    <link rel="stylesheet" href="css/style.css" />
8  </head>
9  <body>
10    <div id="boxA"><textarea id="boxAInput"></textarea></div>
11    <div id="boxB"></div>
12
13    <script src="js/jquery-2.1.3.min.js"></script>
14    <script>
15      $(function() {
16        "use strict";
17
18        let paragraphs;
19        let regExp = /\n\n/g;
20
21        $("#boxAInput").on("input", function() {
22          let input_text = $("#boxAInput").val();
23          paragraphs = input_text.split(regExp);
24
25          $("#boxB").html("");
26          for (let i = 0; i < paragraphs.length; i++) {
27            $("#boxB").append(
28              '<textarea class="boxBTextarea">' + paragraphs[i] + "</textarea>"
29            );
30          }
31        });
32
33        $("#boxB").on("input", function() {
34          let updatedText = "";
35          $("#boxAInput").html("");
36
37          $(".boxBTextarea").each(function(i, o) {
38            updatedText += $(o).val() + "\n\n";
39          });
40          $("#boxAInput").html(updatedText);
41        });
42      });
43    </script>
44  </body>
45</html>
46

試したこと

inputイベントを、#boxBではなく.boxBTextareaにしてみたり、#boxAに書き込む前に$("#boxA).off()でイベントを削除したりなどしてみたのですが、どれも上手く行きませんでした。

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

初心者のため、至らない点もあるかと思いますが、どうぞ宜しくお願いします。

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

回答1件

ベストアンサー

テキストエリアの値の取得、設定は.html()ではなく、.val()で行います。

なので、
$("#boxAInput").html("");
と
$("#boxAInput").html(updatedText);
のところだけ、.val()に直せば動くと思います。

投稿2019/10/25 17:44

aoies

総合スコア331

miyaken912

2019/10/25 21:40

ありがとうございます！解決出来ました！！なお後学のために伺いたいのですが、どのような方法でデバックなり調査なりをすれば自力で解決出来る可能性があったでしょうか？初心者ゆえ、ご回答頂いた内容を見て、質問しなければ恐らく自力では気付けなかっただろうなと思ったため、今後同様なバグが出てきた場合にどう対処すべきかアドバイス頂けると有り難いです。

aoies

2019/10/26 11:35

私も学習者の一人なので、人にアドバイスをできる立場ではないかもしれませんので参考程度に.....。もう散々言われていることかもしれませんが、デバックの基本は、「問題を分解して単純化してどこに原因があるか確かめること」だと思います。そのために色々コードを書き換えることも有効です。そのあとは検索しましょう。例---------------- 今回の場合だと、問題は、「boxBでの入力で何もboxAの内容に変化が起きないこと」です。なのでまず「$("#boxB").on("input", function(){})」でちゃんとboxBへの入力を捕らえられているか、consoleなどを使って確かめます。結果、入力は検知されていることがわかるので、問題は検知後の処理(function(){......}の中身)にあることがわかります。一方で、全くtextareaAの内容に変化が見られないことから、「$("#boxAInput").html("");」がそもそも思い通りに動作していないことを疑います。 (思い通りに行っているならもしその下の処理がうまく行ってないにせよ、Aのtextareaが空になっているはず。) 試しに、そのコードより下の処理を全て消して、入力を検知した際の処理を{$("#boxAInput").html("");}だけにしてみても良いと思います。そうすると、この部分がやはりうまく行っていないことがわかると思います。ここまで問題が単純化されれば、html()メソッドとテキストエリアの関係に問題がある、と気づける可能性も高いです。気づけたなら、「textarea 内容変更 jquery」などと検索してみれば、textareaの内容の取得にはvalを使うことがわかるはずです。もし、htmlとテキストエリアの関係に思い至らないとしても、さらに問題を分解することが可能です。例えば、「この問題は"#boxAInput"を対象にしたhtml()メソッドだけで起きるのか、他の要素を対象にした場合どうなるのか」を調べることができます。もう一つhtml上に適当な要素(<p id="test1">テスト</p>とか)と、もう一つのtextarea(id=test2)とか)を作って、問題となっている箇所を、 $("#test1").html("");や、$("#test2").html(""); に書き換えてみましょう。そうすれば、対象の要素がtextareaの時だけ、html()がうまく動作しないことがわかるはずです。そこで、「textarea html() jquery」と検索すれば、「テキストエリアの値の取得にはvalを使う」ことがやはりわかります。もし、検索しても結果が出てこず、teratailで質問しよう、ということになったとしても、「textareaの値のhtml()による変更が反映されない」という質問の方がより問題が明快で、回答しやすいと思います。また、jqueryでは基本的に値の取得と、値を設定する関数は対になっています。(例えばhtml()で要素の内容の取得ができ、html(“OOO")で書き換えができる。) 今回のケースについて言えば、Aの入力時の処理で、「let input_text = $("#boxAInput").val();」という風にtextareaの値の取得に.val()を使っていることがヒントになったかもしれません。 -------------------------- 初心者なら、急にたくさんのメソッドが出てきたりして、簡単なコードを書くのも大変だと思います。慣れてくれば、コードを書く時、考えることが減って、気づけることも増えると思います。あと、一人で考え込むと意外と簡単なことに気づかないこともあるので、時には他人に人に相談したり、質問サイトに投稿することも悪いことではないと思います。まあ多分皆さん結局それでもデバッグには時間がかかって苦労していると思います。こんなアドバイスで役に立つのかわかりませんが、参考になれば幸いです。

miyaken912

2019/10/29 09:10

丁寧かつ素晴らしいアドバイスありがとうございます！！問題を単純化する、原因と思われる箇所を切り分けて検証することを大変よく理解出来ました。変数をconsole.logなどで見るだけでなく、原因を特定するために色々とコードを書き換えることも有効であるというのが大きな気付きでした。また、これほど丁寧にアドバイス頂けたこと自体にも感動しました。まだまだ私自身は初学者ですが、私も将来スキルを高めて他の誰かにペイフォワードしたいと思います。重ねてになりますが、懇切丁寧なアドバイスありがとうございました！

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