JavaScript에서 버튼을 토글하는 방법은 무엇입니까?
조건문은 JavaScript에서 버튼을 토글하기 위한 기본 요구 사항입니다. 이를 달성하려면 요소를 가져와야 하며 그런 다음 해당 요소에 특정 작업을 적용하기 위해 일부 사용자 정의 함수를 적용해야 합니다. 이 기능은 버튼의 onclick 이벤트와 연결됩니다. 따라서 버튼을 클릭할 때마다 해당 기능이 실행됩니다. JavaScript에서 버튼을 토글하는 몇 가지 예를 연습해 보겠습니다.
예 1: 버튼을 토글하여 문자 메시지 수정
JavaScript에서 버튼을 토글하여 메시지를 수정하는 예가 고려됩니다. 이 예는 HTML 및 JavaScript 코드로 구성되며 아래에 설명되어 있습니다.
HTML 코드
< HTML >
< h2 > 버튼을 토글하는 예 < / h2 >
< div ID = 'js' > 마법을 보려면 버튼을 누르세요 < / div >
< 단추 클릭 = 'btntog()' > 단추 < / 단추 >
< / HTML >
< 스크립트 src = 'test.js' >< / 스크립트 >
HTML 코드에서 설명은 다음과 같습니다.
- ㅏ 태그는 ' 아이디=js '.
- 그 후 버튼이 생성됩니다. 'btntog()' 방법. 눌러서 '단추' , 방법 ' btntog() '가 발동됩니다.
- 결국 자바스크립트 파일은 'test.js' 다음과 같이 전달됩니다. src 이내에 <스크립트> 태그.
JavaScript 파일에 대한 코드 ' test.js '가 여기에 제공됩니다.
자바스크립트 코드
기능 btntog ( )
{
어디 = 문서. getElementById ( 'js' ) ;
만약에 ( 티. 내부HTML == 'Linuxhint에 오신 것을 환영합니다' ) {
티. 내부HTML = '자바스크립트 세계' ; }
또 다른 {
티. 내부HTML = 'Linuxhint에 오신 것을 환영합니다' ; }
}이 코드에서:
- getElementById HTML 요소 '를 추출하는 데 사용됩니다. js '이고 값은 변수에 저장됩니다. 티 '.
- 그 후, 내부HTML 속성은 '텍스트'를 확인하기 위해 if 조건에서 사용됩니다. 리눅스힌트에 오신 것을 환영합니다 '.
- 조건이 참이면 내용 ' 리눅스힌트에 오신 것을 환영합니다 '로 대체 “자바스크립트 세계 '.
- 조건이 거짓이면 텍스트 “Linuxhint에 오신 것을 환영합니다” div 태그에 HTML 콘텐츠로 할당됩니다.
산출
출력은 버튼을 토글하면 다음과 같이 두 개의 메시지를 반환함을 보여줍니다. “Linuxhint에 오신 것을 환영합니다” 그리고 '자바스크립트 세계' 대안으로.
예제 2: JavaScript에서 ON/OFF 버튼 전환
다음은 버튼의 인라인 텍스트를 변경하는 예입니다. 이 예에서 ' 켜기/끄기 ' 텍스트는 버튼을 눌러 값을 변경합니다. HTML 및 JavaScript 코드는 다음과 같습니다.
HTML 코드
< HTML >
< h2 > 버튼을 토글하는 예 h2 >
< 입력 유형 = '단추' ID = '마이비티엔' 값 = '끄다'
클릭 = '데이트();' >
< 스크립트 src = 'test.js' > 스크립트 >
HTML >위의 코드는 다음과 같이 설명됩니다.
- id가 인 클릭 가능한 버튼 '마이비티엔' 가 생성되고 값이 다음으로 설정됩니다. '끄다' .
- 버튼을 누르면, 데이트() 메소드가 발동됩니다.
- 결국, 'test.js' 내부의 소스 경로에 첨부됩니다. <스크립트> 꼬리표.
자바스크립트 코드
기능tgl ( )
{
어디 = 문서. getElementById ( '마이비티엔' ) ;
만약에 ( 티. 값 == '켜짐' ) {
티. 값 = '끄다' ; }
그렇지 않으면 ( 티. 값 == '끄다' ) {
티. 값 = '켜짐' ; }
}이 코드에서:
- ㅏ 데이트() 메소드는 JavaScript에서 버튼을 토글하는 데 사용됩니다.
- 이 방법에서는 다음을 사용하여 HTML 요소를 추출합니다. getElementById 속성을 추가한 다음 if else-if 문이 추가됩니다.
- 만약 '값==ON' , 값을 다음으로 전환 '끄다'. 값이 끄다, 값이 '로 전환됩니다. 켜짐' .
산출
출력은 버튼이 다음에서 토글되었음을 보여줍니다. 끄다 에게 켜짐 .
그게 다야! JavaScript에서 버튼을 토글하는 방법을 배웠습니다.
결론
JavaScript에서 버튼은 자체 값의 다양한 상태 사이를 토글하는 데 사용할 수 있으며 모든 기능은 토글 작업과 연관될 수 있습니다. 그만큼 클릭() 버튼의 이벤트는 기능과 연결됩니다. 이 문서에서는 두 가지 실제 예와 함께 버튼 전환에 대한 개요를 설명합니다. 첫 번째 예제는 다음으로 텍스트를 추출합니다. 내부HTML 속성을 변경하고 토글 버튼을 통해 수정합니다. 두 번째 예에서는 사용자 정의 함수를 사용하여 버튼 자체의 값을 변경합니다.