안녕하세요!!
오늘은 체크박스나 셀렉트 등 다양한 HTML 폼 요소에 접근하여 속성을 바꾸는 방법에 대해 알아보도록 하겠습니다!
실습 준비
실습 전 다음 소스를 복사 붙여넣기 하여 HTML 파일과 JS 파일을 준비 해주세요! (두 개의 파일은 편의상 같은 디렉토리에 위치시켜 주세요)
demo.html
<html lang="en">
<head>
<title>폼 요소 접근하기</title>
<script defer src="demo.js"></script>
<style>
body { display: flex; justify-content: center; align-items: center; }
label { margin: 10px; }
select { margin: 10px; }
</style>
</head>
<body>
<label class="field">이메일 주소 : </label>
<input type="text" id="emailfield">
<select id="emailselect">
<option value="none">== 이메일 선택 ==</option>
<option value="naver">naver.com</option>
<option value="gmail">gmail.com</option>
<option value="daum">hanmail.net</option>
</select>
<input type="checkbox" id="emailcheck">
</body>
</html>
HTML 파일을 실행시키면 위와 같은 폼들이 보일 것입니다. 각각 코드로 구현된 부분은 다음과 같습니다.
- label : 텍스트 (이메일 주소 :)
- input type="text" : 텍스트 입력 필드
- select : 콤보박스
- option : 콤보박스의 옵션
- input type="checkbox" : 체크박스
다음으로 js 소스를 준비하겠습니다.
const field = document.querySelector("#emailfield"); //텍스트 필드
const select = document.querySelector("#emailselect"); //콤보박스
const check = document.querySelector("#emailcheck"); //체크박스
querySelector() 로 텍스트 필드, 콤보 박스, 체크박스 요소에 접근하였습니다.
이제 본격적으로 폼 요소의 값을 다루어보겠습니다.
텍스트 필드의 값 다루기
텍스트 필드의 값 가져오기
우선, 텍스트 필드의 값을 가져오는 방법에 대해 알아보겠습니다.
다음은 포커스가 텍스트 필드에서 벗어났을 때, 텍스트 필드의 값을 콘솔로 출력하는 예제입니다.
field.addEventListener("blur", () => {
console.log(field.value);
});
혹여나 blur와 addEventLister가 낯설게 느껴지신다면 https://hulrud.tistory.com/17 , https://hulrud.tistory.com/18 이 글들을 읽고 오세요
예제를 실행시키면 필드에 텍스트를 입력하고, 마우스를 필드가 아닌 다른 곳을 클릭하였을 때 콘솔에 필드의 값이 출력됩니다.
이처럼 요소.value 를 통해 값을 가져올 수 있습니다.
텍스트필드.value
텍스트 필드의 값 변경하기
다음으로는 필드에 다시 포커스 되었을 때 값을 초기화 하는 예제를 작성해보겠습니다.
field.addEventListener("focus", () => {
field.value = "";
});
간단합니다. emailfeild.value 에 "" 을 대입하여 쉽게 값을 초기화 할 수 있습니다.
간단한 유효성 검사
value를 이용하여 다음 예제를 작성해봅시다.
- 이메일 검증은 필드의 값이 바뀌었을 때 실행됩니다.
- 필드의 값의 길이가 3이상 8이하가 아닐 시
- 필드 값을 초기화 하고, 필드에 포커스를 유지하세요.
- "아이디의 길이는 3~8자리 입니다" 알림창을 뜨게 하세요.
- alert("알림 내용"); 을 통해 알림창을 띄울 수 있습니다.
- value.length로 길이를 가져올 수 있습니다.
- focus() 로 기존에 입력한 값이 지워진 자리에 새로운 값을 입력하도록 텍스트 필드에 커서를 올립니다.
꼭 혼자 힘으로 작성 해보세요!
field.addEventListener("change", () => {
if (field.value.length < 3 || emailfield.value.length > 8){
alert("아이디의 길이는 3~8자리 입니다"); //알림창
field.value = ""; // 값 초기화
field.focus(); // 포커스
}
});
아주 간단한 예제이기 때문에 쉽게 하셨을거라 생각합니다
선택 목록 다루기
select 선택 목록(콤보박스)을 다루어보겠습니다.
value 가져오기
텍스트 필드 옆 선택 목록의 값이 바뀌면 콘솔에 그 값을 출력하는 예제를 작성해보겠습니다.
select.addEventListener("change", () => {
console.log(select.value);
});
출력되긴 하지만, 옵션의 텍스트가 아닌 value 값이 출력됩니다. 그렇다고 해서 value 에 긴 텍스트를 입력하는건 좋은 방법이 아닙니다. 다음 예제들을 통해 다른 방법으로 접근해 봅시다.
innerText로 태그 안 텍스트 가져오기
value 값이 아닌 여는 태그와 닫는 태그 사이의 텍스트(naver.com) 을 가져오려면 innerText 속성을 이용합니다.
select.addEventListener("change", () => {
console.log(select.innerText);
});
하지만 이 때 출력 결과는 select 안의 모든 innerText를 출력하게 됩니다.
이는 select의 option 4개가 배열처럼 저장되어 있기 때문입니다.
배열로 이루어진 option 살펴보기
console.log(select);
위 코드를 통해 select를 콘솔에 출력하면 다음과 같이 출력됩니다.
select 안 option들이 보이시죠?
console.log(select.options);
위 코드를 실행하여 HTMLOptionsCollection 을 살펴봅시다.
select의 자식 요소들이 배열처럼 저장된 것을 확인할 수 있습니다.
이를 이용하여 2번째 option의 innerText를 출력해봅시다.
console.log(select.options[1].innerText);
options[1]의 innerText가 출력됩니다.
options 로 값 가져오기
자 그럼 options로 선택된 값의 innerText를 콘솔에 출력해봅시다.
select.addEventListener("change", () => {
console.log(select.options[select.selectedIndex].innerText);
});
selectedIndex 속성을 사용하면 선택된 요소의 인덱스를 가져올 수 있습니다.
한 줄에 너무 많은 코드가 쓰여 있어 나누어서 살펴봅시다.
select.addEventListener("change", () => {
var options = select.options; // options 배열
var index = select.selectedIndex; // 선택된 인덱스
var txt = options[index].innerText; // 선택된 인덱스의 innerText
console.log(txt);
});
부디 이해하는데 도움이 되셨길 바랍니다..!
실행 결과 >>
체크박스 다루기
체크박스가 체크되었을 때 콘솔 창에 체크 상태를 출력하는 예제를 작성해보겠습니다.
check.addEventListener("change", () => {
console.log(check.checked);
});
checked를 이용하여 손쉽게 체크박스가 체크되었는지, 아닌지를 알 수 있습니다.
체크박스가 체크되었을 때, "이메일 아이디 @ 이메일 주소" 가 인증되었습니다. 라는 문구를 알림창에 띠우는 코드를 작성해봅시다
- 알림은 alert() 함수를 사용합니다
- 이메일 아이디는 텍스트 필드의 값입니다.
- 이메일 주소는 콤보 박스에 선택된 값입니다.
check.addEventListener("change", () => {
if(check.checked){
var address = field.value + "@" + select.options[select.selectedIndex].innerText;
alert(address+"가 인증되었습니다.");
}
});
실행 결과 >>
이 게시물의 내용을 이해 하셨다면, 토이 프로젝트를 진행하기 충분합니다!!
추가적으로 라디오 버튼 접근하는 방법도 알아주시면 더 좋습니다
'Programming Language > JavaScript' 카테고리의 다른 글
[JavaScript] 비동기 처리와 콜백 함수 (0) | 2023.07.19 |
---|---|
[JavaScript] 데이터 단위 변환기 토이 프로젝트 만들어보기 (0) | 2023.05.06 |
[JavaScript] DOM 객체와 이벤트 처리 (2) | 2023.04.28 |
[JavaScript] 이벤트와 이벤트 처리기 (0) | 2023.04.23 |
[JavaScript] 익명 함수, 즉시 실행 함수, 다양한 함수의 표현법 알기 (0) | 2023.04.23 |