How do I replace any existing selection of elements by id in my browser with javascript?

Question

I confess I don't really have any knowledge of Javascript. I found this on the internet and it does do what I want:

<script type="text/javascript">
    function CopyToClipboard(containerid) {
        if (document.selection) {
            var range = document.body.createTextRange();
            range.moveToElementText(document.getElementById(containerid));
            range.select().createTextRange();
            document.execCommand("copy");
        } else if (window.getSelection) {
            var range = document.createRange();
            range.selectNode(document.getElementById(containerid));
            window.getSelection().addRange(range);
            document.execCommand("copy");
            alert("The assignment slip has been copied, now paste into an email")
        }
    }
</script>

It is called like this:

<button id="button1" onclick="CopyToClipboard('containter-student-slip1')">Click to copy</button>

The problem is that I must clear the selection before I click the next button in the browser. I would like it to simply select the specified element with ID and replace any existign selection in the browser.

OpenSourceAdvocate · Answer 1 · 2021-01-25T14:59:27.190

0

if this is not what you were looking for, kindly post the inputs html. As the id would need to be changed if slip1 is dynamic.

<script type="text/javascript">

  $(document).ready(function(e) {

    $('body').on('click', '[id^=button]', function(e) {
    
      CopyToClipboard('container-student-slip1');
    
    });

    function CopyToClipboard(containerid) {
        if (document.selection) {
            var range = document.body.createTextRange();
            range.moveToElementText(document.getElementById(containerid));
            range.select().createTextRange();
            document.execCommand("copy");
        } else if (window.getSelection) {
            var range = document.createRange();
            range.selectNode(document.getElementById(containerid));
            window.getSelection().addRange(range);
            document.execCommand("copy");
            alert("The assignment slip has been copied, now paste into an email"); //had a missing comma
        }
    }
  
  });

</script>

<button id="button1">Click to copy</button>

edited Jan 25 '21 at 14:59

answered Jan 25 '21 at 14:44

OpenSourceAdvocate

61
8

I have a table of rows of data. Each row has a div with a unique ID and a button designed to copy that div contents. So I have no inputs to reset fromw hat i know. I simply want it to "re-select" a new selection with the specified ID. Imagine I have ID 1 and ID 2. If I hit button 1 it selects ID1 element. If I then hit button 2 it should now clear teh selection and select ID2 element. At the moment it is simply stopping because it already has a select of ID1 element. – Andrew Truckle Jan 25 '21 at 14:50
I have updated my answer. I understand what you are doing although your codes logic is a bit off and requires much more code. Instead select the button dynamically and then run the function. – OpenSourceAdvocate Jan 25 '21 at 15:00
Thanks. When I run your snippet in the answer ut says there is an unexpected < token. – Andrew Truckle Jan 25 '21 at 15:19
1

Yes, you cannot run it as a snippet, you need to put it with your code. that token error is due to me not adding the js library to the post. Please edit your code with mine then give it a go – OpenSourceAdvocate Jan 25 '21 at 20:41
I appreciate your answer. But I was able to follow the code referred to in the duplicated answer that simply clears the selection. Thanks all the same. – Andrew Truckle Jan 25 '21 at 22:21

How do I replace any existing selection of elements by id in my browser with javascript?

1 Answers1