html 동적으로 바꾸는거 질문있습니다.

[정중식]

function init() {
  const formSelect = document.querySelectorAll('.form-select')[0];
  const sizeFormSelect = document.querySelectorAll('.form-select')[1];

  formSelect.addEventListener('change', function (e) {
    const newOptions = document.createElement('option');

    if (e.target.value === '셔츠') {
      sizeFormSelect.classList.remove('form-hide');
    } else if (e.target.value === '모자') {
      sizeFormSelect.classList.add('form-hide');
    } else if (e.target.value === '바지') {
      sizeFormSelect.classList.remove('form-hide');
      sizeFormSelect.innerHTML = '';
      newOptions.innerHTML = '<option>29</option> <option>30</option>';
      sizeFormSelect.appendChild(newOptions);
    }
  });
}

init();

위 와 같이 코드를짯는데 바지를 선택하면 

29
30 

이런식으로 select가 각각나와야하는데 사진처럼 나옵니다.

혹시 스크립트를 어떤식으로 고쳐줘야할까요?.. 

[codingapple]

option태그 만들어서 <option>을 넣는거같은데 
select태그 만들어서 <option>을 넣읍시다

[정중식]

select태그가 sizeFormSelect 변수에 담겨있고, 
sizeFormSelect.appendChild() 를 썼으니 셀렉태그 안에 옵션태그가 담기는거라고 생각했는데 이게 아닐까요?

[codingapple]

const newOptions = document.createElement('option');
newOptions.innerHTML = '<option>29</option> <option>30</option>';
이거 때문에 

<option>
  <option>29</option> <option>30</option>
</option> 
newOptions 는 이렇게 생성되는듯요

[정중식]

답변감사합니다.

제이쿼리는 이제 잘안쓰여서 읽을줄만 알면된다고들 하셔서 강의따라가면서 제이쿼리말고 자바스크립트로 짜고있었는데 ..
몸소 체험해보니, 강사님이 강의에서 제이쿼리를 왜 쓰시는지 이제 알거같네요.. 

[codingapple]

다른 분들도 쌩자바스크립트 쓰다가 포기합니다

[정중식]

포기란 없습니다! 꺾이지않는 마음..

근데 강사님 어디선가 듣기론, 제이쿼리는 읽을줄만 알면된다. 대부분 자바스크립트로 짠다고 들었는데 그래도 여전히 제이쿼리는 쓰이나요??

[codingapple]

쌩자바스크립트는 안쓰고 리액트같은거 씁니다

[글쓴이]

글