Level 3 : 1~3 (array, object)

1. object 자료형에 넣은 데이터를 html에 데이터바인딩하기

var car2 = {name: '소나타', price: 50000}
document.querySelector('.card > span:first-child').innerHTML = `${car2.name}`;
document.querySelector('.card > span:last-child').innerHTML = `${car2.price}`;

---

2. object 자료형에 넣은 'array 데이터'를 html에 데이터바인딩하기

var car2 = {name: '소나타', price : [50000, 3000, 4000]}
document.querySelector('.car-price').innerHTML = `${car2.price[0]}`;

알게된 점

이를 client-side rendering이라고 한다. (서버에 html을 직접 입혀 띄우는 것은 server-side rendering)

---

3. 박스에서 셔츠 선택하면 숨어있던 사이즈 셀렉박스 띄우기

조건

모자를 선택하면 사이즈 셀렉박스가 사라져야 한다.

---

처음 풀이

const inputNext = function(){
    let selectClothe = document.querySelector('.form-select');
    let selectClotheSize = document.querySelector('.form-popup');
    if(selectClothe.value == '셔츠') {
        selectClotheSize.classList.toggle('form-hide');
    }
}

---

onchange 이벤트를 html 태그에 박지 않고 script에 넣은 풀이

let selectClothe = document.querySelector('.form-select');
let selectClotheSize = document.querySelector('.form-popup');
const inputNext = function(){
    if(selectClothe.value == '셔츠') {
        selectClotheSize.classList.remove('form-hide');
    } else {
        selectClotheSize.classList.add('form-hide');
    }
}
selectClothe.addEventListener('input', inputNext);

---

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