[javascript] TO DO LIST 를 만들어보자2 (내용 변경하기 : update, keypress)

// 1월 12일차
let updateFlag = true //on.off 스위치 역할
function updateHandler(e){

    if (updateFlag) updateFlag = false
    else return //한번에 하나만 업데이트. 엔터치기 전까지 다른 거 못 건드림
    
    //삼항연산자 if문 한줄로 줄이는 거 존재


    //innerHTML 내용 바꾸고 싶을 때 사용
    console.log(e.target.innerHTML) //<span> 안의 내용만 출력
    let content = e.target.innerHTML
    e.target.innerHTML = ''
    console.log(content)

    //인풋박스 생성하기 (span안에 input박스 넣기)
    const inputElement = document.createElement('input')
    inputElement.value = content
    console.log(inputElement)
    e.target.append(inputElement)

    inputElement.addEventListener('keypress', keypressHandler) //keypress>> 키 누를때마다 함수가 실행
}

function keypressHandler(e){
    // console.log(e.keyCode) //enter가 13번
    if(e.keyCode !== 13) {
        return
    }

    let content = e.target.value
    console.log(e.target.value) // e.target의 바뀐 값
    let node = e.target.parentNode
    // node.innerHTML = '' //날리기
    node.innerHTML = content
    updateFlag = true
}
// 자바스크립트로 html을 조작할 수 있다는 것을 배웠다.