Have a of problems with Copy Text to clipboard

[Tim606]

I have used the "copy text to clipboard" code from this site (https://www.w3schools.com/howto/howto_js_copy_clipboard.asp) and while it works for a couple of sentence, it does not work for a three or four  paragraphs of text (approx 180 words). Can the code be adapted to allow for paragraphed text?

Secondly is possible it increase the size of the copy text window so it allows more of the text to be read rather that first 3 or four words

[Ingolme]

All you need to do is replace the input element with a textarea. It is allowed to hold much larger amounts of text and can be given width and height with CSS if necessary.

<textarea id="myInput" cols="40" rows="10">Paragraphs of text go in here</textarea>

[Tim606]

Thank you Ingolme, that worked perfectly for what I needed

[Tim606]

OK I may have spoken to soon, I have 16 different sets of text which I have listed out on a web page (not via a web server as it amounts to only two pages so I am calling the two pages directly from there file location into the web browser). Now I have setup the first message using Ingolme suggestion

O I have setup two of the message to copy to clipboard for the purpose of testing (see a section of the code below) so if I click on the copy text button on the first text message it pop up and window with the highlighted text click, OKand it copies to the clipboard and will paste out when I select paste.

Now I want to use the second text message, click on the copy text button the window pops up showing the first text message and if I continue and click OK the fist message is copied to the clipboard again, it does not copy the second text message.

I have 18 of these text message and I want to be able to copy any of them to the clipboard and to paste them into a form (they are basically generic answers to questions which saves a lot of time when you have to write the same thing over and over several times a day.)

Below is a sample of the first two messages as they appear in the index.html file (sorry I had to replace the text for obvious reasons), is there a way to get it to work the way I want?

<div class="post">
					<h2  class="title"><a href="#">new tp user </a></h2>
					<div class="entry">
						<p id="newtpuser"></p>
						<textarea id="myInput" cols="80" rows="20">
Paragraph 1 Blah Blah Blah blah blah Blah Blah Blah blah blah Blah Blah Blah blah blah Blah Blah Blah blah blah Blah Blah Blah blah blah Blah Blah Blah blah blah 
                          
Paragraph 2 Blah Blah Blah blah blah Blah Blah Blah blah blah Blah Blah Blah blah blah Blah Blah Blah blah blah Blah Blah Blah blah blah Blah Blah Blah blah blah 
                          
Paragraph 3 Blah Blah Blah blah blah Blah Blah Blah blah blah Blah Blah Blah blah blah Blah Blah Blah blah blah Blah Blah Blah blah blah Blah Blah Blah blah blah 
                          
Paragraph 4 Blah Blah Blah blah blah Blah Blah Blah blah blah Blah Blah Blah blah blah Blah Blah Blah blah blah Blah Blah Blah blah blah Blah Blah Blah blah blah 
                          
Paragraph 5 Blah Blah Blah blah blah Blah Blah Blah blah blah Blah Blah Blah blah blah Blah Blah Blah blah blah Blah Blah Blah blah blah Blah Blah Blah blah blah 
</textarea>
						<div class="tooltip">
<button onclick="myFunction()" onmouseout="outFunc()">
  <span class="tooltiptext" id="myTooltip">Copy to clipboard</span>
  Copy text
  </button>
</div>
<p><a href="#top">back to top</a></p>
  </div>
</div>

<div class="post">
					
					<h2 class="title"><a href="#">new users </a></h2>
					<div class="entry">
						<p id="newuser"></p>
						<textarea id="myInput" cols="80" rows="20">
Paragraph 1 Hello hello hello hello hello hello Hello hello hello hello hello hello Hello hello hello hello hello hello Hello hello hello hello hello hello Hello hello hello hello hello hello Hello hello hello hello hello hello
                          
Paragraph 2 Hello hello hello hello hello hello Hello hello hello hello hello hello Hello hello hello hello hello hello Hello hello hello hello hello hello Hello hello hello hello hello hello Hello hello hello hello hello hello
                          
Paragraph 3 Hello hello hello hello hello hello Hello hello hello hello hello hello Hello hello hello hello hello hello Hello hello hello hello hello hello Hello hello hello hello hello hello Hello hello hello hello hello hello
                          
Pargaraph 4    Hello hello hello hello hello hello Hello hello hello hello hello hello Hello hello hello hello hello hello Hello hello hello hello hello hello Hello hello hello hello hello hello Hello hello hello hello hello hello                       
</textarea>
						<div class="tooltip">
<button onclick="myFunction()" onmouseout="outFunc()">
  <span class="tooltiptext" id="myTooltip">Copy to clipboard</span>
  Copy text
  </button>
</div>
						
						<p><a href="#top">back to top</a></p>
					</div>
					
				</div>	                    

[Ingolme]

You gave the same id to both textareas. When the Javascript code asks for an element with id = "myInput", the browser doesn't know which of the two you want, so it selects the first one.

[Tim606]

Ah right so simply give each text area a different name, yep I can see the logic, so simple. 

Thanks again

Edited March 25, 2022 by Tim606

[Tim606]

On 3/25/2022 at 4:32 PM, Ingolme said:

You gave the same id to both textareas. When the Javascript code asks for an element with id = "myInput", the browser doesn't know which of the two you want, so it selects the first one.

OK so I have to give an individual name to each text area, but then I have to list those name in the Java script as I have the line

/* Get the text field */
  var copyText = document.getElementById("myInput", "text2");

But When I added text2  to what I think is the correct line in Javascript, and changed the myIputs to text2 in one of the text areas, it still did not work. I did try a semi colon as a separator between the two names in the JS but that did not work either.

[Ingolme]

getElementById() can only return one element. You have to take this into account when writing your code. Each button needs to select the correct textarea.