Copy text button JavaScript

Question

I have div with foreaches inside of it and my goal is to make an button to copy all the output in de div

code:

if(isset($_GET['bestellijst'])) 
{
    ?><div class="bestellijst"><?
    foreach ($lijst['palen'] as $key => $value) 
    {
        ?><? echo $value ?>x paal <? echo "'" .$key. " cm'" ?><br><?
    }?><br><?
    foreach ($lijst['panelen'] as $key => $value) 
    {
        ?><? echo $value ?>x panelen <? echo "'" .$key. " cm'" ?><br><?
    }
    echo "<br>beugels: " . $allebeugels . "<br>";
    ?><button onclick="KopieerFuntie()">kopieer bestellijst</button>
    </div><?
}
    }
    else{echo "<h4>Voeg een zijde toe</h4>";}
    }
    ?><script>
        function KopieerFunctie()
        {
            var copyText = document.getElementById("????");
            copyText.select();
            document.execCommand("copy");
            alert("Copied the text: " + copyText.value);
        }
    </script><?

I don't know what to put in ???? Sorry if the code is messy im just a beginner. Thanks for your help.

You can also use ```document.querySelector``` or ```document.querySelectorAll```? — JO3-W3B-D3V, Dec 19 '18 at 09:02

Oli Crt · Accepted Answer · 2018-12-19T09:29:30.643

You're calling select on a div element so it won't work, it's a little trickier than copying content from an input element.

First you need to get your div element correctly, you can use document.getElementsByClassName('bestellijst')[0] assuming your div is the first element with this class name.

Then you can update your function as such: Borrowed from J. Garcia from this answer

function KopieerFunctie()
{
    var range = document.getSelection().getRangeAt(0);
    range.selectNode(document.getElementsByClassName('bestellijst')[0]);
    window.getSelection().addRange(range);
    document.execCommand("copy")
}

score 0 · Answer 2 · answered Dec 19 '18 at 09:16

Is this the kind of thing that you're trying to get?

<div class="bestellijst">
  <p>hello world! </p>
</div>
<div class="bestellijst">
  <p>how are you today?</p>
</div>

<script>
  const copyFunction = () => {
    let copy = '';
    Array.prototype.slice.call(document.querySelectorAll(".bestellijst")).map(el => 
      copy += el.innerText.replace(/\r?\n/g, '') + ' '
    );
    return copy;
  };
  
  console.log(copyFunction());
  alert("Copied the text: " + copyFunction());
</script>

score -3 · Answer 3 · answered Dec 19 '18 at 09:13

-3

It is a good practice to give an UniqueID to each HTML element. I suggest you to add them to the initial div, and everything else. For example, the div would be:

<div class="bestellijst" id="container">

then use in your ???? just container

Bear in mind that you should extract the text from the div with innerHtml. Value is used for textbox or any other input element

answered Dec 19 '18 at 09:13

PRiSMiWi

101
1
6

1

This is debatable, if there's no need for a unique ID, then you're just bloating your HTML file(s) for no reason. – JO3-W3B-D3V Dec 19 '18 at 09:15
I agree, I have should said, every HTML element you are going to refer with selectors. CSS selectors are way fast using ID than Classes. Also I dont think this is a reason to downvote me ;) – PRiSMiWi Dec 19 '18 at 12:00
True, the speed of using ID's it is better than using classes, but if you use modern practices, you shouldn't really have much of an issue either way, the regarding your point of using an ID over classes it's true, but is it really relevant anymore? ... I mean if you're having speed issues due to using classes over ID's, something tells me your app has a lot of room for improvement... – JO3-W3B-D3V Dec 19 '18 at 12:03

Copy text button JavaScript

3 Answers3