复制文本按钮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.

Answer 1

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")
}

Answer 2

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> 

Answer 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