CODEWITHSUNDEEP
javascripthtml
Ahmad Wahid
Ahmad Wahid

Reputation: 47

Copy JS function works on single element but, fails to run on multiple elements and copies just single element

I have a copy function in my code where the copy button copies the data of textarea in the clipboard. The code and the button for it works fine for first textarea but, the buttons against 2 and remaining textareas don't do the function, somehow.

Here is my code

HTML:

<input id="input_1" class="text-area-main input_mainn" type="text" placeholder="Input Goes Here" oninput="funcinput1()"> //input field

Input field 1

<textarea id="output_1" class="text-area-main output_copy"></textarea> //field whose data needs to be copied

<button class="ml-auto copy-btn btn_cpy col-md-1 col-12 button_copy integration-checklist__copy-button btn_copy" id="btn_copy" data-clipboard-text="" data-clipboard-action="copy" onclick="myFunctionCopy()">COPY</button> // copy button

Input field 2:

<textarea id="output_2" class="text-area-main output_copy"></textarea>

<button class="ml-auto copy-btn btn_cpy col-md-1 col-12 button_copy integration-checklist__copy-button btn_copy" id="btn_copy" data-clipboard-text="" data-clipboard-action="copy" onclick="myFunctionCopy()">COPY</button>

Here is the JS code:

function myFunctionCopy() {
    var copyText = document.getElementById("output_1");
  copyText.select();
  copyText.setSelectionRange(0, 99999);
  document.execCommand("copy");
  
  var tooltip = document.getElementById("btn_copy");
  tooltip.innerHTML = "Copied"
  }

I tried changing the getElementById to getElementsByClassName and giving the "output_copy" class to it but, it still does not work.

Help!

I am new to JS coding and have tried multiple things but, still not resolving it.

I will have upto 20 textarea and each will have a dedicated copy button against it so need a solution which will only copy the value of that specific textarea and not others.

Thanks Pros & Seniors!

Upvotes: 1

Views: 98

Answers (2)

Ahmet S&#246;nmez
Ahmet S&#246;nmez

Reputation: 96

I think you can do whatever you want using this library. I have used it before and it worked for me.

https://clipboardjs.com/

HTML : 

<!-- Trigger -->
<button class="btn" data-clipboard-target="#foo">
    <img src="assets/clippy.svg" alt="Copy to clipboard">
</button>

JavaScript :

var clipboard = new ClipboardJS('.btn');

clipboard.on('success', function(e) {
    console.info('Action:', e.action);
    console.info('Text:', e.text);
    console.info('Trigger:', e.trigger);

    e.clearSelection();
});

clipboard.on('error', function(e) {
    console.error('Action:', e.action);
    console.error('Trigger:', e.trigger);
});

Upvotes: 1

Haidaoui Issam
Haidaoui Issam

Reputation: 41

you need to make the id a variable in the function like this :

function myFunctionCopy(outputid) {
    var copyText = document.getElementById(outputid);
  copyText.select();
  copyText.setSelectionRange(0, 99999);
  document.execCommand("copy");
  
  var tooltip = document.getElementById("btn_copy");
  tooltip.innerHTML = "Copied"
  }

and in the html use

<input type="submit" value="copy" onClick="myFunctionCopy(output1)" />

Upvotes: 1

Related Questions