How to get copy text to work on different divs?

Question

I have a 'div' that copies the text and I can paste it somewhere else.

<div id="div1">
    <div>
        Positive Comments:
        <br/>
        <textarea id="txtArea" rows="3" name="txtCommentPositive#CurrentRow#">
            #reReplaceCommentpositive
        </textarea>
    </div>
    <div>
        Negative Comments:
        <br/>
        <textarea rows="3" name="txtCommentNegative#CurrentRow#">
             #reReplaceCommentnegative#
        </textarea>
    </div>
    <input type="button" id="btn" value="copy" onclick="copyText()" />
</div>

It works when it has one result since its getting the first div1, but when it has two or more results even if i click on the 'copy' it will copy the first text. How can I get it that it will copy each div separately?

This is my javascript:

function copyText() {
    var copyDivText = document.getElementById('div1').innerText;
    var returnVal = window.clipboardData.setData('Text', copyDivText);
    alert(returnVal);

    document.getElementById('div2').innerText = window.clipboardData.getData('Text');
}

just a note: you do realize that `window.clipboardData` is [hardly cross-browser supported](http://stackoverflow.com/questions/5278408/window-clipboarddata-is-not-part-of-javascript)? Why are you using it instead of a common variable (asking out of interest)? Likewise, `innerText` [is again IE only](http://stackoverflow.com/questions/1359469/innertext-works-in-ie-but-not-in-firefox). — GitaarLAB, Jun 04 '14 at 17:32
@gitaarlab yes i do and i only want it to for in IE , dont care for other browsers — user3591637, Jun 04 '14 at 17:50

score 0 · Answer 1 · answered Jun 04 '14 at 19:03

After re-reading your question countless times, suddenly it clicked: it seems like you want to use the code from div1 as a 'pattern' that you can re-use.
However your javascript has currently just one div-id hard-coded.

I didn't know what to make of div2 (from your function) so I changed that (as example) to a textarea (with id clipboardText) that will show you the text-content that was just copied to the clipboard.

For simplicity (staying in-line of what seems to be your current code-logic/style) I suggest that the button is a direct child of the div that it needs to get the innerText from. If this is the case (and we continue to use inline-script), you'd pass this (that refers to the button that was clicked) to the function. In the function you'd then simply get the innerText of the button's parentNode:

Javascript:

function copyText(t) {
    var copyDivText = t.parentNode.innerText;
    var returnVal = window.clipboardData.setData('Text', copyDivText);
    alert(returnVal);

    document.getElementById('clipboardText').value = window.clipboardData.getData('Text');
}

HTML Body (note I added another 'pattern' with id div2, since that seemed inline with what I guess you are doing):

<textarea id="clipboardText"></textarea>
<hr>
<div id="div1">
    <div>
        Positive Comments:
        <br/>
        <textarea id="txtArea" rows="3" name="txtCommentPositive#CurrentRow#">
            #reReplaceCommentpositive
        </textarea>
    </div>
    <div>
        Negative Comments:
        <br/>
        <textarea rows="3" name="txtCommentNegative#CurrentRow#">
             #reReplaceCommentnegative#
        </textarea>
    </div>
    <input type="button" id="btn" value="copy" onclick="copyText(this);" />
</div>
<div id="div2">
    <div>
        Positive Comments:
        <br/>
        <textarea id="txtArea" rows="3" name="txtCommentPositive#CurrentRow#">
            #reReplaceCommentpositive
        </textarea>
    </div>
    <div>
        Negative Comments:
        <br/>
        <textarea rows="3" name="txtCommentNegative#CurrentRow#">
             #reReplaceCommentnegative#
        </textarea>
    </div>
    <input type="button" id="btn" value="copy" onclick="copyText(this);" />
</div>

Hope this is what you intended with your question.

PS: if this is what you intended, note that a lot of people consider inline-scripts bad and when you dynamically attach your function you do not have to pass this anymore (since then this can be called directly inside your function).

How to get copy text to work on different divs?

1 Answers1