Copy Text to Clipboard by clicking the text itself

Question

So i have a load of text and within the text is words that have brackets around them.

See below:

At the moment i am doing a pre_replace in PHP to essentially put any text that are in between the [] into a span, where they are then coloured and given a class of clickable.

i essentially want to be able to click on the text and it copies that word to the clipboard.

At the moment i have this PHP:

$note = preg_replace('%(\[(.+?)\])%m', '<span style="color: #009EC0;" class="hover-cursor clickable">$1</span>', $note);

I found this jQuery online and just kind of changed the class names to mine:

// Copy replace variable to clipboard

document.getElementById('.clickable').addEventListener('click', function(event) 
{
    var copyTextarea = document.querySelector('.clickable');

    copyTextarea.select();

    try 
    {
        var successful = document.execCommand('copy');
        var msg = successful ? 'successful' : 'unsuccessful';
        console.log('Copying text command was ' + msg);
    } 
    catch (err) 
    {
        console.log('Oops, unable to copy');
    }
});

However this gives me an error saying: Cannot read property 'addEventListener' of null

So how can i achieve this?

Here's your problem: `document.getElementById('.clickable')`, note the `.`. Secondly, this may be helpful to you: https://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript — Rory McCrossan, Jul 20 '17 at 11:02
@HimanshuUpadhyay I assume you mean `getElementsByClassName()` instead. Note that if you do it that way you'd need to loop over the resulting collection, or access it by index. — Rory McCrossan, Jul 20 '17 at 11:06
@RoryMcCrossan I have removed the `.` but its still giving the error Cannot read property 'addEventListener' of null. Also that link you provided is where i got this code and tried to adapt it to my code but to no avail :( — Luke Litherland, Jul 20 '17 at 11:17
Does an element with an `id` of `clickable` exist in the DOM? — Rory McCrossan, Jul 20 '17 at 11:38
@RoryMcCrossan it does yes, i have added an `id="clickable"` too, im not getting that error anymore as i added an if statement on geting the element by ID, before adding teh listener, so now its not adding the listener because its saying the id of clickable is NULL despite it being there. — Luke Litherland, Jul 20 '17 at 11:52
Does the element exist when the page loads, or are you adding it dynamically? — Rory McCrossan, Jul 20 '17 at 11:55
That's your issue now then. You're adding the event listener before the element exists. You need to put it on the element after you've created it in the DOM — Rory McCrossan, Jul 20 '17 at 11:56

Copy Text to Clipboard by clicking the text itself

0 Answers0