[Coding Apple] 상품 옵션(option) / forEach문 / JS로 HTML 다루기

 

 

상품 옵션(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>`)
        });
    }
});

 

 

 

+ 옵션 전체 내용 변경하기

1. 옵션의 기존 내용 지우기
2. 변경할 내용 생성하기 (문자형 html)
3. 옵션에 변경한 내용 추가하기
   • 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;
}

 

 

 

---

 

 

깃허브

 

 

 

---

 

 

출처

코딩애플