Javascript 未捕获的类型错误:text.select 不是函数

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/39096330/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 22:11:53  来源:igfitidea点击:

Uncaught TypeError: text.select is not a function

javascript

提问by r1993

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.

我正在尝试使用 javascript 实现复制到剪贴板功能,这意味着当用户单击复制按钮时复制文本区域中的文本。这是来自脚本的代码,旨在执行此功能。

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 ?

但是,当我运行它时,我在 google chrome 控制台上收到错误消息,说Uncaught TypeError: text.select is not a function。我也在其他浏览器上对此进行了测试,但得到了相同的结果。其他人遇到过这个问题吗?

采纳答案by Jamiec

getElementsByClassNamereturns a HTMLCollectionof found elements not an individual element. A HTMLCollection indeed does not have a selectfunction.

getElementsByClassName返回一个HTMLCollection找到的元素而不是单个元素。HTMLCollection 确实没有select函数。

You probably want the first element in the collection

您可能想要集合中的第一个元素

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

回答by olevran

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.

我今天遇到了这个问题,当标记的答案对我不起作用时,我和你一样感到沮丧。经过一些额外的思考,我意识到我的问题是试图粘贴到段落元素中<p></p>。当我将其更改为 textarea 时,它运行良好。所以您确实在访问数组时遇到了问题,但是当您最终到达特定元素时,您应该确保它是一个可编辑元素。

Good luck!

祝你好运!

回答by Dylan Meeus

The .select()method does indeed retrieve the text from a field. However, you are trying to run it on an array of elements var text = document.getElementsByClassName('js-text');. This method returns an array of all elements with that class name.

.select()方法确实从字段中检索文本。但是,您正在尝试在元素数组上运行它var text = document.getElementsByClassName('js-text');。此方法返回具有该类名的所有元素的数组。

If there is only one such element, you could use the array indexer to retrieve the first one. var text = document.getElementsByClassName('js-text')[0];.

如果只有一个这样的元素,您可以使用数组索引器来检索第一个。var text = document.getElementsByClassName('js-text')[0];.

Alternatively, if there is only one such element, you might consider giving this element an idand using document.getElementById()which will only return one element. (An ID should be unique on the page)

或者,如果只有一个这样的元素,您可能会考虑给这个元素一个 anid并使用document.getElementById()which 将只返回一个元素。(一个ID在页面上应该是唯一的)

回答by theodorhanu

getElementByClassName returns an array of elements So, you have to use text[0].select();

getElementByClassName 返回一个元素数组所以,你必须使用 text[0].select();