select 응용문제 질문

[김희민]

모자, 셔츠 선택하면 추가 사이즈 선택하는 부분에서 질문이 있습니다.

처음에 셔츠를 선택하면 상세 사이즈가 잘 나오는데, 여기서 새로고침을 하지 않고 다시 모자를 선택하면 계속 사이즈 선택 창이 떠있습니다. 

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

<select class="form-select mt-2 hide">
<option>S</option>
<option>M</option>
<option>L</option>
</select>
</form>

---------------------------------------

.hide {
display: none;
}

------------------------------------------
<script>
document.querySelectorAll(".form-select")[0].addEventListener("input", (e) => {
document.querySelector(".hide").classList.add("hide");
       if (e.target.value == "셔츠") {
          document.querySelector(".hide").classList.remove("hide");
}
});
</script>
----------------------------------------------
따라서 다음과 같이, select에 변화가 있을 때마다 
1) document.querySelector(".hide").classList.add("hide"); 을 기본적으로 실행해서 상세사이즈 선택창을 숨기고, 
2) 그 후 if문을 활용해서 만약 너가 선택한게 셔츠라면 사이즈 선택창을 보여줘

라고 코드를 작성했는데, 제 의도대로 작동하지 않습니다. 어떤 부분을 수정해야 할까요??

[codingapple]

3. 모자선택하면 사이즈선택창 숨기라고 코드짜면 될듯요

[김희민]

<script>
document.querySelectorAll(".form-select")[0].addEventListener("input", (e) => {

document.querySelector(".hide").classList.add("hide");
     if (e.target.value == "셔츠") {
         document.querySelector(".hide").classList.remove("hide");
}
     if (e.target.value == "모자") {
        document.querySelector(".hide").classList.add("hide");
}
});
</script>


이렇게 짰는데 뭐가 문제일까요??

[codingapple]

콘솔창에 에러같은거 안뜨나 확인해봅시다

[글쓴이]

글