때때로 개발자는 웹 페이지에서 추가 작업 과정을 결정하기 위해 사용자가 클릭한 버튼의 ID를 알아야 합니다. 이 글에서 볼 수 있듯이 이것은 바닐라 JavaScript와 jQuery를 통해 수행할 수 있습니다. 시작하겠습니다.
먼저 페이지 중앙에 두 개의 버튼이 있는 간단한 HTML 웹페이지를 만듭니다.
DOCTYPE HTML >
< HTML >
< 신체 >
< 센터 >
< div 스타일 = '마진 상단: 50px;' >
< h2 > 다음 버튼 중 하나를 클릭하십시오 h2 >
< 단추 ID = 'button_one' 스타일 = '너비: 100px; 높이: 40px; 오른쪽 여백: 10px;' > 1 단추 >
< 단추 ID = 'button_two' 스타일 = '너비: 100px; 높이: 40px;' > 둘 단추 >
div >
센터 >
신체 >
HTML >
JavaScript를 사용하여 클릭한 버튼의 ID를 얻는 방법은 무엇입니까?
여러 가지 방법으로 JavaScript를 사용하여 클릭한 버튼의 ID를 얻을 수 있습니다. 첫 번째 방법에서는 모든 버튼 태그의 노드 목록을 가져와 변수 안에 저장합니다. 그런 다음 노드 목록을 반복하여 클릭된 버튼의 ID를 가져옵니다.
< 스크립트 >
var 버튼 = document.getElementsByTagName ( '단추' ) ;
~을 위한 ( 허락하다 인덱스 = 0 ; 인덱스 < 버튼.길이; 색인++ ) {
버튼 [ 인덱스 ] .onclick = 기능 ( ) {
알리다 ( this.id ) ;
}
}
스크립트 >
우리는 또한 각 버튼을 설정할 수 있습니다 클릭 이벤트 개별:
< HTML >
< 신체 >
< 센터 >
< div 스타일 = '마진 상단: 50px;' >
< h2 > 다음 버튼 중 하나를 클릭하십시오 h2 >
< 단추 ID = 'button_one' 스타일 = '너비: 100px; 높이: 40px; 오른쪽 여백: 10px;' 클릭 = '경고 ID(this.id)' > 1 단추 >
< 단추 ID = 'button_two' 스타일 = '너비: 100px; 높이: 40px;' 클릭 = '경고 ID(this.id)' > 둘 단추 >
div >
센터 >
신체 >
< 스크립트 >
기능 경고 ID ( ID ) {
알리다 ( ID )
}
스크립트 >
HTML >
jQuery를 사용하여 클릭한 버튼의 ID를 얻는 방법은 무엇입니까?
jQuery에는 클릭한 버튼의 ID를 가져오는 데 사용할 수 있는 여러 가지 방법도 있습니다. 시작하겠습니다. 딸깍 하는 소리() 선택자에 적용되고 함수 이름을 선택적 인수로 취하는 메소드:
DOCTYPE HTML >< HTML >
< 신체 >
< 센터 >
< div 스타일 = '마진 상단: 50px;' >
< h2 > 다음 버튼 중 하나를 클릭하십시오 h2 >
< 단추 ID = 'button_one' 스타일 = '너비: 100px; 높이: 40px; 오른쪽 여백: 10px;' 클릭 = '경고 ID(this.id)' > 1 단추 >
< 단추 ID = 'button_two' 스타일 = '너비: 100px; 높이: 40px;' 클릭 = '경고 ID(this.id)' > 둘 단추 >
div >
센터 >
신체 >
< 스크립트 >
$ ( '단추' ) .딸깍 하는 소리 ( 경고 ID ( $ ( 이것 ) .attr ( 'ID' ) ) ) ;
기능 경고 ID ( ID ) {
알리다 ( ID )
}
스크립트 >
HTML >
우리는 또한 사용할 수 있습니다 에() 이벤트 핸들러를 요소에 연결하는 메소드. 그만큼 에() 메소드는 다른 선택적 인수와 함께 하나 이상의 이벤트를 인수로 취합니다.
< HTML >
< 신체 >
< 센터 >
< div 스타일 = '마진 상단: 50px;' >
< h2 > 다음 버튼 중 하나를 클릭하십시오 h2 >
< 단추 ID = 'button_one' 스타일 = '너비: 100px; 높이: 40px; 오른쪽 여백: 10px;' 클릭 = '경고 ID(this.id)' > 1 단추 >
< 단추 ID = 'button_two' 스타일 = '너비: 100px; 높이: 40px;' 클릭 = '경고 ID(this.id)' > 둘 단추 >
div >
센터 >
신체 >
< 스크립트 >
$ ( '단추' ) .에 ( '딸깍 하는 소리' , 경고 ID ( $ ( 이것 ) .attr ( 'ID' ) ) ) ;
기능 경고 ID ( ID ) {
알리다 ( ID )
}
스크립트 >
HTML >
결론
클릭한 버튼의 ID는 일반 JavaScript와 jQuery를 통해 액세스할 수 있습니다. 우리는 이러한 네 가지 방법에 대해 논의했으며 이 글에서 심층적인 세부 사항과 관련 예를 제공했습니다.