テキストエリアの値を取得しhtmlでなくテキストエリアに表示させたい。

下記コードにて、①②のテキストエリアに入力しボタンを押すとhtmlに表示されます。
これを③のテキストエリアへ表示できないでしょうか。

どうぞよろしくお願いいたします。

<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

①<textarea id="hoge1" class="testA"></textarea>
②<textarea id="hoge2" class="testA"></textarea>
<input id="ButtonA" type="button" value="button" />
<br><div id="outputA"></div>
<p>③<textarea id="outputB" cols="40" rows="5" name="myTEXT" class="output10"></textarea><br></p>



<script>
    $(document).ready(function () {
      $("#ButtonA").click(function () {
        var inputText = $(".testA").map(function (index, el) {
          return $(this).val();
        });

        showtext = "";
        for (i = 0; i < inputText.length; i++) {
          showtext += inputText[i] + "<br/>";
        }
        $("#outputA").html(showtext);

      });
    });

</script>

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

回答2件

ベストアンサー

このようにしてはいかがでしょうか？

HTML
1<!DOCTYPE html>
2<html>
3<head>
4    <meta charset="utf-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        * {
8            margin: 0;
9            padding: 0;
10        }
11    </style>
12</head>
13<body>
14<label>
15    ①<textarea id="hoge1" class="testA"></textarea>
16</label>
17<label>
18    ②<textarea id="hoge2" class="testA"></textarea>
19</label>
20<input id="ButtonA" type="button" value="button">
21<br>
22<div id="outputA"></div>
23<label>
24    ③<textarea id="outputB" cols="40" rows="5" name="myTEXT" class="output10"></textarea>
25    <br>
26</label>
27
28<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
29<script>
30    $(document).ready(function () {
31        $("#ButtonA").click(function () {
32            var inputText = $(".testA").map(function (index, el) {
33                return $(this).val();
34            });
35
36            showtext = "";
37            for (i = 0; i < inputText.length; i++) {
38                showtext += inputText[i] + "\n";
39            }
40            $("#outputB").text(showtext);
41        });
42    });
43</script>
44</body>
45</html>

投稿2017/02/11 12:11

編集2017/02/11 12:17

s8_chu

総合スコア14731

suisuin

2017/02/12 11:48

動作を確認し無事解決しました。ありがとうございます！これから、表示させたテキストエリアの内容をbuttonクリックでlocalStoragに保存できるよう挑戦します。

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

シンプルに

JavaScript
1<!DOCTYPE html>
2<html>
3<head>
4    <title>Title</title>
5    <script>
6    function OnClick(){
7      target = document.getElementById("outputB");
8      target.innerText = document.getElementById("hoge1").value
9          + document.getElementById("hoge2").value ;
10
11      this.outputB.text(this.hoge1+this.hoge2);
12    }
13    </script>
14</head>
15<body>
16(1)<textarea id="hoge1"></textarea>
17(2)<textarea id="hoge2"></textarea>
18<input type="button" value="button" onClick="OnClick()">
19<br>
20(3)<textarea id="outputB" cols="40" rows="5" class="output10"></textarea>
21</body>
22</html>

投稿2017/02/11 15:25

hikochang

総合スコア648

suisuin

2017/02/12 11:48

回答ありおがとうございます。単体での動作を確認できたのですが、他に組み込んでいるjavascriptの都合？もありまして、IDで動作させようとすると不都合がありました。検索で調べgetElementsByClassNameでも挑戦したのですがうまくできませんでした。ちょっと長ったらしいスクリプトで初心者である私が上手くお伝えできないのが問題で恐縮ですが、参考にさせて頂いたことにおいてお礼申し上げます。

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

あなたの回答