JS : 투두리스트 Edit/Update - 에러 (초보..)

Question

edit버튼을 누르면 첫번째 아이템만 업데이트가 되고 다른 열들은 업데이트가 안됩니다. edit버튼 있는 곳에서 새롭게 생성된 id를 넣어야 할것 같은데 어떻게 해야하나요? function createItem(text, id) { const itemRow = document.createElement('li'); itemRow.setAttribute('class', 'item_row'); itemRow.setAttribute('data-id', id || Date.now()); itemRow.innerHTML = `

${text}

`; return itemRow; } // edit 부분입니다 const itemName = document.querySelector('.item_name'); const editBTN = document.querySelector('.item_edit'); const newItemInput = document.createElement('input'); editBTN.addEventListener('click', (event) => { if (event.target.innerText === 'Update') { itemName.innerText = newItemInput.value; newItemInput.value = ''; editBTN.innerText = 'Edit'; } else { itemName.innerHTML = ''; newItemInput.type = 'text'; newItemInput.className = 'newItemInput'; itemName.appendChild(newItemInput); newItemInput.focus(); editBTN.innerText = 'Update'; } saveItems(); });

Gear · Answer

이거

이렇게 있는데const p = document.querySelector(".hello");이렇게 하면 p에는 "이거" 녀석이 담깁니다.이 상태에서

이거

저거

이렇게 추가 해도 변수 p에 담긴 값은 변하지 않습니다.이벤트 버블링을 활용한 이벤트 위임에 대해 알아보세요.https://ko.javascript.info/bubbling-and-capturinghttps://ko.javascript.info/event-delegation

JS : 투두리스트 Edit/Update - 에러 (초보..)

1개의 답변

Q&A 목록