JS 폼 활용 연습, input, change 이벤트

const form = document.querySelector('form');
form.addEventListener('submit', function (e) {
    e.preventDefault();
    const ul = document.querySelector("#list");
    const li = document.createElement('li');
    const qty = form.elements.qty;
    const product = form.elements.product;
    li.innerText = `${qty.value} ${product.value}`
    ul.append(li);
    qty.value = ""
    product.value = ""

})

innerText를 넣는 방식으로도 가능하며 위 코드에서는 append를 했지만 appendChild도 가능하다.

appendChild는 값을 return하며 string을 넣을 수  없다.

const input = document.querySelector('input');
const h1 = document.querySelector('h1');
input.addEventListener('change', function (e) {
    console.log("fgfjhasdkjf");
}) // 인풋에 뭔가 입력하고 다른걸 누르면 (body든 뭐든) log 출력

input.addEventListener('input', function (e) {
    console.log("INPUT EVENT!")
    h1.innerText = input.value;
}) // 인풋에 뭔가를 h1의 innerText가 input.value 즉, 우리가 입력한 값이 됨(동기화)

shift키나 화살표 키는 인식하지 않는다.

const h1 = document.querySelector('h1')
const input = document.querySelector('input')

input.addEventListener('input', function (e) {
    if (input.value === "") {
        h1.innerText = "Enter Your Username"
    } else {
        h1.innerText = `Welcome, ${input.value}`;
    }
})

input 이벤트는 위 같은 경우 input의 type의 text인데, text에 뭔가를 적는다면 input 이벤트가 실행되어 

h1의 innerText가 동기화되어 Welcome, Kim ( text에 Kim을 적음 ) 이 된다. 만약 input의 value값이 빈칸이면 innerText가 Enter your Username이 된다.