前提・実現したいこと

ChromeExtentionを現在作成していて、任意のクラスの内容をまとめてテキストエリアに表示したいです。

該当のソースコード

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>highlight</title>
  </head>
  <body>
    <div id="test1" class="aaa">test1</div>
    <div id="test2" class="aaa">test2</div>
    <div id="test3" class="aaa">test3</div>
    <div id="test4" class="aaa">test4</div>
　　<textarea id="highlightarea" name="contents" rows="30" cols="100"></textarea>
  </body>
</html>

  Array.from(document.querySelectorAll('div.aaa'), function(e){
    document.getElementById("textarea").innerText = e.innerText;
  });

試したこと

array.fromでクラス内のテキストを取得させてテキストエリアに表示させようとしましたが、上記のコードだとtest4しかテキストエリア内に表示されません。test1からtest4まですべて表示するにはどのようにすればよろしいでしょうか。

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

回答2件

ベストアンサー

たとえばこういう感じで。

js
1document.getElementById("highlightarea").value = Array.from( document.querySelectorAll( 'div.aaa' ), e => e.innerText ).join( "\n" );
2```**動くサンプル：**[https://jsfiddle.net/n65o88jx/](https://jsfiddle.net/n65o88jx/)
3
4---
5
6【Array.from() - JavaScript | MDN】
7[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/from](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/from)
8
9【Array.prototype.join() - JavaScript | MDN】
10[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/join](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/join)

投稿2018/03/27 15:47

kei344

総合スコア69398

isaotinen

2018/03/28 04:23

回答有り難うございます！

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

大きく3つ間違っていて

document.getElementById("textarea").innerText = e.innerText;

textareaというidのノードはありません
テキストエリアのinnerTextをいじるのはおすすめしません(valueへアクセス)
ループ処理を「=」で代入すると前のデータは上書きされます

Array.fromはIE対応してないんじゃなかったでしたっけ？
逆にIEを斬るつもりならもっといろいろ書ける気がします
データをループして取るならArray.prototypeのforEachかmapですね

sample

javacript
1<div id="test1" class="aaa">test1</div>
2<div id="test2" class="aaa">test2</div>
3<div id="test3" class="aaa">test3</div>
4<div id="test4" class="aaa">test4</div>
5<textarea id="highlightarea" name="contents" rows="30" cols="100"></textarea>
6<script>
7document.querySelector("#highlightarea").value=Array.prototype.map.call(document.querySelectorAll('div.aaa'), function(x){
8return x.innerHTML;
9}).join(",");
10</script>