copy text from one div to other div using javascript

Question

<div id="noty">Hello</div>
<div id="noty">World</div>
<div id="noty">Nation</div>

<div id="textArea"></div>

$("#noty").click(function() {
    $("#textArea").html($("#noty").html());
});

I'm using this to copy text from one div to other by onclick function. But this is not working. It's only working on the first div. Is there any way to accomplish this ?

You cant have multiple elements with same `id` attribute. Use `class` or `data-id` instead — Gene R, Dec 20 '15 at 09:06
Why would the number of divs matter? You'd put them on 50 divs the same way you put them on 3 divs. — JJJ, Dec 20 '15 at 09:09
I not answering the question directly but use angularjs. It makes a lot these things easier without a lot of js coding. — Gary, Dec 20 '15 at 09:43

Gene R · Accepted Answer · 2015-12-20T09:11:05.027

2

Use something like this:

<div class="noty">Hello</div>
<div class="noty">World</div>
<div class="noty">Nation</div>

<div id="textArea"></div>

<script>
$(".noty").click(function() {
    $("#textArea").html($(this).html());
});
</script>

https://jsbin.com/giqilicesa/edit?html,js,output

edited Dec 20 '15 at 09:11

answered Dec 20 '15 at 09:09

Gene R

3,684
2
17
27

hey, If i use it isn't working – niranjan kumar Dec 20 '15 at 09:16
@niranjankumar then `$("#textArea").val($(this).text());` – Gene R Dec 20 '15 at 09:18

score 2 · Answer 2 · answered Dec 20 '15 at 09:10

Like this.

$(".noty").click(function(e) {
    $("#textArea").html(e.target.innerHTML);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="noty">Hello</div>
<div class="noty">World</div>
<div class="noty">Nation</div>

<div id="textArea"></div>

score 1 · Answer 3 · answered Dec 20 '15 at 09:12

1

Yes. var s = ''; $('.noty').each(function () {s += $(this).html();}); $('#textarea').html(s); but change your divs to use class="noty" instead of id. The id should be unique.

answered Dec 20 '15 at 09:12

Steve Harris

5,014
1
10
25

This would be all three divs btw – Steve Harris Dec 20 '15 at 09:15

score 1 · Answer 4 · edited May 23 '17 at 12:30

At first, you must not use multiple id attribute. And another problem is sizzle providing jQuery as a selector engine returns result to use getElementById. It means even if you've declared multiple ids, you'll get just only one id element. When consider those problems, you can get over this problem to follow this way:

<div class="noty">Hello</div>
<div class="noty">World</div>
<div class="noty">Nation</div>

<div id="textArea"></div>
<script>
var $noty = $('.noty');
var $textarea = $('#textArea');
$noty.click(function () {
  var text = Array.prototype.map.call($noty, function (el) {
    return $(el).html();
  }).join(' ');

  $textarea.html(text);
});
</script>

copy text from one div to other div using javascript

4 Answers4