Level 3 : 4 (array, object, forEach)

4. 바지 선택하면 array에 저장한 바지사이즈 셀렉박스 만들기

조건

바지를 선택하면 array에 입력한 데이터가 사이즈 셀렉박스에 자동으로 추가되어야 한다. 

---

틀린 풀이

<form class="container my-5 form-group">
  <p>상품 선택</p>
  <select class="form-select mt-2">
    <option>모자</option>
    <option>셔츠</option>
    <option>바지</option>
  </select>
  <select class="form-select form-popup mt-2 form-hide">
    <option>100</option>
  </select>
</form>

let pants = [28, 30, 32];

let selectBox = document.querySelector('.form-select');
let selectSize = document.querySelector('.form-popup');

function pantsSize() {
    if (selectBox.value == '바지') {
        selectSize.classList.remove('form-hide');

        for (i = 0; selectSize.length = pants.length; i++) {
            document.querySelectorAll('.form-popup option')[i].innerHTML = pants[i];
            selectSize.appendChild(document.createElement('option'));
        }
    } else { selectSize.classList.add('form-hide'); }
}
selectBox.addEventListener('input', pantsSize);

수치사할까 봐 올릴까 말까 고민 많이 했는데.. for문 조건식을 부등호로 했다가 빈 셀렉박스로 노출되어 등호로 바꿨더니 작동이 되어버려서 등호로 했다. 이는 당연한 건데, 등호가 선언처럼 작동하여 무한루프 조건식이 되어버린 것.

---

작동하는 풀이

let pants = [28, 30, 32];

let selectBox = document.querySelector('.form-select');
let selectSize = document.querySelector('.form-popup');

function pantsSize() {
    if (selectBox.value == '바지') {
        selectSize.classList.remove('form-hide');

        for (i = selectSize.length; i < pants.length; i++) {
            selectSize.appendChild(document.createElement('option'));
            document.querySelectorAll('.form-popup option')[i].innerHTML = pants[i];
        }
    } else { selectSize.classList.add('form-hide'); }
}
selectBox.addEventListener('input', pantsSize);

의문이었던 부분

왜인지 let selectSizeElement = document.querySelectorAll('.form-popup option'); 으로 option을 전역변수로 설정해 두고 for문안에  document.querySelectorAll('.form-popup option')[i]을 selectSizeElement[i]으로 주니 selectSizeElement[i]가 undefined가 나왔다. 디버깅 직접 document.querySelectorAll('.form-popup option')[i]으로 콘솔에 찍어보면 값이 제대로 나왔다. 변수 수에 할당한 값을 함수 안에서 인덱스를 주면 에러가 나는걸까?

의문 해결

document.querySelectorAll('.form-popup option')을 전역변수로 설정하니(if문 첫줄에 넣어도 똑같다) createElement로 새로운 option을 만들기 전에 읽어버려서 인덱스들이 읽어지지 않는 것이었다.

for (i = selectSize.length; i < pants.length; i++) {
    selectSize.appendChild(document.createElement('option'));
    let selectSizeElement = document.querySelectorAll('.form-popup option'); //여기
    selectSizeElement[i].innerHTML = pants[i];
}

(그래서 이건 제대로 작동한다)

---

forEach 버전

let pants = [28, 30, 32];

let selectBox = document.querySelector('.form-select');
let selectSize = document.querySelector('.form-popup');

function selectSizePop() {
    if (selectBox.value == '바지') {
        selectSize.classList.remove('form-hide');
        selectSize.innerHTML = '';
        
        pants.forEach(function(pantsSize){
            selectSize.insertAdjacentHTML('beforeend', `<option>${pantsSize}</option>`);
        });
    } else { selectSize.classList.add('form-hide'); }
}
selectBox.addEventListener('input', selectSizePop);

---

출처 : 코딩애플 https://codingapple.com/