Uncaught TypeError: text.select is not a function

Question

I am trying to implement copy to clipboard feature using javascript which is meant to copy the text in the text area when the copy button is clicked by the user. This is the code from script which is meant to do this feature.

var item = document.getElementsByClassName('js-copyBtn');

for(var i=0; i < item.length; i++){
    item[i].addEventListener('click', function(event){

        var text = document.getElementsByClassName('js-text');
        text.select();

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

However when i run this, i am getting an error on google chrome console saying Uncaught TypeError: text.select is not a function. I have also tested this on other browsers but getting the same result. Anyone else came across this problem ?

Answer 1

I ran into this problem today and felt frustrated just as you when the marked answer didn't work for me. After some additional thinking i realised my problem was trying to paste into paragraph element <p></p>. When I changed it to textarea it worked well. So you indeed had a problem with the access to the array but when you finally got to the specific element you should have made sure its an editable element.

Good luck!

Answer 2

getElementsByClassName returns a HTMLCollection of found elements not an individual element. A HTMLCollection indeed does not have a select function.

You probably want the first element in the collection

var text = document.getElementsByClassName('js-text');
text[0].select();