자바스크립트로 html 생성부분

[우효창]

<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 mt-2 show-shirts">
          <option>95</option>
          <option>100</option>
          <option>105</option>
        </select>
    </form>

    <script>

      document.getElementsByClassName('form-select')[0].addEventListener('input', function(){
      var 유저선택 = document.getElementsByClassName('form-select')[0].value;
        if(유저선택 == '셔츠'){
          document.getElementsByClassName('form-select')[1].classList.remove('show-shirts');
        }
        else
          document.getElementsByClassName('form-select')[1].classList.add('show-shirts');
      })

      document.getElementsByClassName('form-select')[0].addEventListener('input', function(){
        var 바지선택 = document.getElementsByClassName('form-select')[0].value;
        var 바지사이즈 = '<option>28</option><option>30</option>';
          if( 바지선택 = '바지'){
            document.getElementsByClassName('form-select')[1].innerHTML = 바지사이즈;
            document.getElementsByClassName('form-select')[1].classList.remove('show-shirts');
          }
          else
            document.getElementsByClassName('form-select')[1].classList.add('show-shirts');
      })

    </script>

 

생자바스크립트에 먼저 익숙해지기 위해 jquery도 있지만 일부러 이렇게 작성하고 있습니다.

위에 처럼 코드를 작성하였는데, 

바지 옵션을 추가하고 거기에 따라 사이즈를 바꾸는 기능을 만들기전,  모자와 셔츠중 셔츠를 골랐을때, 사이즈 인풋이 출현하고, 다시 모자를 고르면 사라지는것 까지는 잘 출력이 됐습니다.

바지 옵션 추가하는부분을 작성한 뒤로 문제가 생겼는데,

1.페이지 로드하자마자 셔츠를 눌러도 안의 내용이 바지사이즈로 바뀌어 출현하고, 그 상태로 다시 모자로 돌아가도 인풋이 사라지지 않음.

2.바지를 고르면 사이즈가 바뀌어 출현하긴 하지만, 그 상태에서 모자나 셔츠를 고르면 인풋이 사라지지 않음.

이런 문제가 생겼는데,

전체적으로 잘못짠걸까요.. ㅜㅜ

[우효창]

<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 mt-2 show-shirts">
          <option>95</option>
          <option>100</option>
          <option>105</option>
        </select>
    </form>

    <script>

      document.getElementsByClassName('form-select')[0].addEventListener('input', function(){
      var 유저선택 = document.getElementsByClassName('form-select')[0].value;
      var 바지사이즈 = '<option>28</option><option>30</option>';
      var 셔츠사이즈 = '<option>95</option><option>100</option><option>105</option>'
      if(유저선택 == '셔츠'){
        document.getElementsByClassName('form-select')[1].innerHTML = 셔츠사이즈;
        document.getElementsByClassName('form-select')[1].classList.remove('show-shirts');
      }
      else if(유저선택 == '바지'){
        document.getElementsByClassName('form-select')[1].innerHTML = 바지사이즈;
        document.getElementsByClassName('form-select')[1].classList.remove('show-shirts');
      }
      else if(유저선택 == '모자'){
        document.getElementsByClassName('form-select')[1].classList.add('show-shirts');
      }
       
    })

 

안녕하세요. 

질문을 올리고 다시 훑어보며 코드를 정리해 보았습니다.

표면적으로는 의도한대로 출력이 된것같은데,

피드백 받고싶습니다!

[codingapple]

잘되면 다 맞는답입니다

맨 위 코드처럼 같은 html에 같은 이벤트의 리스너를 2번이나 부착할 필요는 없습니다 

input이벤트가 발생할 때 마다 var 바지사이즈 같은걸 계속 생성할 필요는 없어서 그런 변수는 밖으로 빼도 좋을듯요 

[글쓴이]

글