상품 옵션(option) / forEach문 / JS로 HTML 다루기
<Select> 태그
: 드롭다운 메뉴를 만드는 태그
- <form> 태그 안에서 <option> 태그와 함께 사용
<form>
<p>상품선택</p>
<select>
<option>모자</option>
<option>셔츠</option>
</select>
</form>
<input> - 자유로운 형식 / 직접 입력
vs
<select> - 제한적인 형식 / 선택
<input> 이벤트
: 입력값이 바뀔 때마다 발생하는 이벤트
- 입력칸에서 값을 변경할 때는 (마우스로 선택하는 입력칸이어도) 클릭(click) 이벤트가 아닌 input 이벤트를 사용해야 한다.
document.querySelectorAll('.form-select')[0].addEventListener('input', function() {
...
});
e.currentTarget
: 이벤트(addEventListener)가 붙어 있는 타켓을 가리킨다.
e.currentTarget == this
- e.currentTarget ⇒ this로 대체해서 사용할 수 있다.
document.querySelectorAll('.form-select')[0].addEventListener('input', function() {
1. var v = document.querySelectorAll('.form-select')[0].value;
2. var v = e.currentTarget.value;
// e.currentTarget ⇒ document.querySelectorAll('.form-select')[0]를 가리킴
3. var v = this.value;
// this ⇒ document.querySelectorAll('.form-select')[0]를 가리킴
});
e.target
: 이벤트가 발생한 타겟을 가리킨다.
array의 forEach문
array명.forEach(function(array의 데이터) {
반복할 코드
});
: forEach( ) 콜백 함수 안에 있는 코드가 array의 데이터 개수만큼 반복된다.
- 콜백함수의 파라미터 ⇒ 배열의 데이터
- 파라미터 2개 생성 가능
- 첫 번째 파라미터는 array 안의 데이터
두 번째 파라미터는 정수 (0부터 1씩 증가)
var pants = [28, 30, 32];
pants.forEach(function(size, i) { // 콜백함수의 파라미터 = 배열의 데이터
document.querySelectorAll('.form-select')[1].insertAdjacentHTML('beforeend', `<option>${size}</option>`)
// 28, 30, 32
document.querySelectorAll('.form-select')[1].insertAdjacentHTML('beforeend', `<option>${i}</option>`)
// 0, 1, 2
});
object의 for-in문
for (var key in object명) {
반복할 코드
}
: for-in( ) 함수 안에 있는 코드가 object의 데이터 개수만큼 반복된다.
var obj = {name : 'kim', age : 20}
for (var key in obj) {
// key 값 출력
console.log(key); // name, age 출력
// value 값 출력
console.log(obj[key]); // kim, 20 출력
}
자바스크립트로 html 추가하기
case 1
- document.createElement( ) : html 태그를 생성
- 셀렉터.appendChild( ) : 셀렉터 안에 html 요소 추가
// 1. <p> 태그를 생성, 변수에 저장
var a = document.createElement('p');
// 2. 내용 수정
a.innerHTML = '안녕';
// 3. 요소 안에 <p> 태그 추가
document.querySelector('#test').appendChild(a);
case 2
- 셀렉터.insertAdjacentHTML('추가할 위치', 문자형 html)
: 셀렉터에 문자형 html을 추가 - 추가할 위치
'beforeend' : 안쪽 맨 밑에 추가
'beforebegin' : 요소 바로 앞에 추가
'afterbegin' : 요소 첫 번째 자식 요소 바로 앞에 추가
'beforeend' : 요소 안쪽 맨 밑에 추가
'afterend' : 요소 바로 다음에 추가
var 템플릿 = '<p>안녕</p>';
document.querySelector('#test').insertAdjacentHTML('beforeend', 템플릿);
- 내용 전체를 변경하기 : innerHTML 사용
상품마다 옵션 다르게 보여주기
구현 계획
1. 옵션이 있는 상품과 없는 상품 구분해서 보여주기
- '셔츠'를 선택하면 '사이즈'가 보임 → '사이즈'의 hide 클래스 remove
- '모자'를 선택하면 '사이즈'를 가림 → add
2. 옵션의 기존 내용 지우기
- innerHTML = ' ';
3. 해당 상품의 데이터만큼 새로운 옵션 생성하기
- 반복문(forEach)으로 셀렉터 안에 데이터 옵션 추가하기
document.querySelectorAll('.form-select')[0].addEventListener('input', function() {
var v = document.querySelectorAll('.form-select')[0].value;
if (v == '셔츠') {
// 1. 옵션이 있는 상품과 없는 상품 구분해서 보여주기
document.querySelectorAll('.form-select')[1].classList.remove('form-hide');
// 2. 옵션의 기존 내용 지우기
document.querySelectorAll('.form-select')[1].innerHTML = '';
// 3. 데이터 개수만큼 <option> 태그 생성하기
var shirts = [95, 100, 105];
shirts.forEach(function(size) { // 콜백함수의 파라미터 = 배열의 데이터
document.querySelectorAll('.form-select')[1].insertAdjacentHTML('beforeend', `<option>${size}</option>`);
});
} else if (v == '모자') {
document.querySelectorAll('.form-select')[1].classList.add('form-hide');
} else if (v == '바지') {
document.querySelectorAll('.form-select')[1].classList.remove('form-hide');
document.querySelectorAll('.form-select')[1].innerHTML = '';
var pants = [28, 30, 32];
pants.forEach(function(size, i) {
document.querySelectorAll('.form-select')[1].insertAdjacentHTML('beforeend', `<option>${size}</option>`)
});
}
});
+ 옵션 전체 내용 변경하기
- 옵션의 기존 내용 지우기
- 변경할 내용 생성하기 (문자형 html)
- 옵션에 변경한 내용 추가하기
- appendChild( ); or insertAdjacentHTML( ); 사용
if (v == '바지') {
document.querySelectorAll('.form-select')[1].classList.remove('form-hide');
// 1. 옵션의 기존 내용 지우기
document.querySelectorAll('.form-select')[1].innerHTML = '';
// 2. 변경할 내용
var p = `<option>28</option>
<option>30</option>`; // 백틱(`) 사용
// 3. 옵션에 변경한 내용 추가하기
document.querySelectorAll('.form-select')[1].insertAdjacentHTML('beforeend', p);
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<form class="container">
<p>상품선택</p>
<select class="form-select">
<option>모자</option>
<option>셔츠</option>
<option>바지</option>
</select>
<select class="form-select form-hide">
<option>95</option>
<option>100</option>
</select>
</form>
<script src="index.js"></script>
</body>
</html>
main.css
.form-hide {
display: none;
}
깃허브
출처
코딩애플