2016-08-23 7 views
-2

사용자가 복사 버튼을 클릭 할 때 텍스트 영역의 텍스트를 복사하는 javascript를 사용하여 클립 보드에 복사 기능을 구현하려고합니다. 이것은이 기능을 수행하기위한 스크립트의 코드입니다. 내가이 프로그램을 실행할 때 잡히지 않은 TypeError : text.select가 함수가 아닙니다.

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'); 
     } 
    }); 
} 

그러나, 나는 catch되지 않은 형식 오류를 말하는 구글 크롬 콘솔에 오류가 점점 오전 : text.select 함수 없습니다. 나는 또한 다른 브라우저에서 이것을 테스트했지만 동일한 결과를 얻었습니다. 다른 누구든지이 문제를 겪었습니까?

+2

가능한 중복 첫 번째 요소를 원하는 [반환 querySelectorAll, getElementsByClassName 및 기타 getElementsBy \ * 방법을 무엇을?] (http://stackoverflow.com/questions/10693845/ what-do-queryselectorall-getelementsbyclassname-other-getelementsby-method) – JJJ

답변

1

getElementsByClassName은 개별 요소가 아닌 발견 된 요소의 HTMLCollection을 반환합니다. 실제로 HTMLCollection에는 select 함수가 없습니다.

당신은 아마도 컬렉션의

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

doi를 시도했습니다. 그것도 같은 오류가 불행히도 – r1993

+0

@ r1993 jsfiddle 또는 그럴 필요가 없습니다. – Jamiec

+0

나는 그것을 텍스트 [0] .select();로 바 꾸었습니다. 하지만 동일한 오류가 발생했습니다 – r1993

0

.select() 메서드는 실제로 필드에서 텍스트를 검색합니다. 그러나 요소 배열 var text = document.getElementsByClassName('js-text');에서 실행하려고합니다. 이 메서드는 해당 클래스 이름을 가진 모든 요소의 배열을 반환합니다.

이러한 요소가 하나만있는 경우 배열 인덱서를 사용하여 첫 번째 요소를 검색 할 수 있습니다. var text = document.getElementsByClassName('js-text')[0];.

또는 이러한 요소가 하나만있는 경우이 요소에 id을 부여하고 document.getElementById()을 사용하면 하나의 요소 만 반환하는 것이 좋습니다. (ID는 페이지에서 고유해야 함)

+0

getElementsByClassName을 사용하는 이유는 내 웹 페이지에 클립 보드 기능이 두 개 이상 있기 때문에 모든 텍스트 영역에 동일한 클래스 이름을 부여했기 때문입니다. – r1993

+0

한 요소에 대해서만, 그러나 모든 요소에 대해 고유 한 ID를 부여하고 여러 요소를 가져야합니다. – r1993

0

getElementByClassName은 요소 배열 을 반환합니다. 따라서 텍스트 [0] .select();

관련 문제