프로그래머 도전기 57일차

오늘은

드디어 기다리던 주말입니다

할일 목록 만들기에 집중을 할 예정입니다

 

 

할일 목록 만들기

update_input이외의 곳을 클릭하면 input창이 사라지도록 기능 추가

    const ClickOtherPlace = (e) => {
        if (!itemElem.contains(e.target) && e.target !== inputElem) {
            const inputElements = itemElem.querySelectorAll('input.update_input');
            inputElements.forEach(inputElement => {
                itemElem.removeChild(inputElement);
            });
            document.body.removeEventListener('click', ClickOtherPlace);
        }
    };

document.body.addEventListener('click', ClickOtherPlace);

=> 문서의 전체 body에 대한 클릭 이벤트 리스너를 등록하고, ClickOtherPlace 함수에서 다른 부분을 클릭했을 때         

      itemElem에서 inputElem을 제거하고 이벤트 리스너를 제거

 

 

const updateInput = (e, todoId) => {
    const todoElem = e.target.parentNode.querySelector('.todo');
    const inputText = todoElem.innerText;
    const itemElem = todoElem.parentNode;
    const inputElem = document.createElement('input');
    inputElem.value = inputText;
    inputElem.classList.add('update_input');
    
    const ClickOtherPlace = (e) => {
        if (!itemElem.contains(e.target) && e.target !== inputElem) {
            const inputElements = itemElem.querySelectorAll('input.update_input');
            inputElements.forEach(inputElement => {
                itemElem.removeChild(inputElement);
            });
            document.body.removeEventListener('click', ClickOtherPlace);
        }
    };

    inputElem.addEventListener('keypress', (e) => {
        if (e.key === 'Enter') {
            updateTodo(e.target.value, todoId);
            const inputElements = itemElem.querySelectorAll('input.update_input');
            inputElements.forEach(inputElement => {
                itemElem.removeChild(inputElement);
            });
            document.body.removeEventListener('click', ClickOtherPlace);
        }
    });
    
    document.body.addEventListener('click', ClickOtherPlace);
    itemElem.appendChild(inputElem);
}

수정된 updateInput 함수입니다

 

 

 

 

 

 

2023. 10. 28 (토)