-
아래와 같이 바지를 클릭했을 때 array(pants = [28, 30, 32, 34])에 있는 내용들이 html의 class=form-select[1]에 들어가는 연습을 했는데요. console.log를 찍어보면 복사는 된 걸로 나오는데 화면 창에는 뜨지가 않습니다. 기존 정보들은 따옴표가 없이 그냥 출력되는데 append나 insertAdjacentHTML를 써보니 "가 붙어서 보이지 않는 것 같기도 하고요.. 어떻게 하면 제대로 나오게 할 수 있을까요?
<h6><body>
<div id="test"></div>
<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 detail mt-2">
<option>녹색</option>
<option>검정색</option>
<option>흰색</option>
</select>
<div id="test"></div>
</form>
<script></h6>
<h6> // pants 데이터갯수만큼 <option> 생성해주세요
// array 자료에서 forEach(callback 함수) : 반복문
let pants = [28, 30, 32, 34];</h6>
<h6> pants.forEach(function(){
console.log('안녕?');
});
pants.forEach(function(a,i){ // a=array의 data들, i=0++
console.log(a);
});
document.querySelectorAll('.form-select')[0].addEventListener('input', function(){
let value = document.querySelectorAll('.form-select')[0].value;
if(value === '셔츠'){
document.querySelectorAll('.form-select')[1].classList.add('show');
console.log(document.querySelectorAll('.form-select')[1]);
} else if(value === '바지'){
document.querySelectorAll('.form-select')[1].classList.add('show');
document.querySelectorAll('.form-select')[1].innerHTML='';
pants.forEach(function(a){
document.querySelectorAll('.form-select')[1].append(`<option>${a}</option>`);
});
console.log(document.querySelectorAll('.form-select')[1]);
}
})</h6>
<h6> pants.forEach(function(a){
let template = `<option>%{a}</option>`;
document.querySelectorAll('.form-select')[1].insertAdjacentHTML('beforeend', template);
});</h6>
<h6></script>
</body></h6>
- 답변은 로그인 후 가능합니다.