자바스크립트 투두리스트 관련 조언부탁해요

Question

오전인가에 질문 올렸었는데.. 도움을 받아서 다시 시도하는 중입니다. var btn=document.querySelector(".sub"); function doApply(e){ //Input 이벤트 등록 함수 e.preventDefault(); var toDo=document.querySelector('.todo'); var toDoValue=toDo.value; if(e.target=='keydown'){ var keycode = e.which || e.keyCode; if (keycode = 13) return; } if(toDoValue===''){ window.alert('할 일을 입력해주세요.'); }else{ var list = document.querySelector('.list'); var listItem = document.createElement('p'); listItem.innerHTML = toDoValue + " "; list.appendChild(listItem); toDo.value = ''; } } function doRemove(e){ var removeBtn = document.querySelector('button'); e.closest('p').remove(); } window.addEventListener('load', function(){ btn.addEventListener('click', doApply); toDoValue.addEventListener('keydown', doApply); removeBtn.addEventListener('click', doRemove); }); 현재 위와 같이 코드 작성 했습니다.제가 계획한 건함수1 doApply - input 조건 1) 내용이 작성이 안되면 경고창 2) 버튼 클릭 시 이벤트 등록 3) 엔터 누를 때 이벤트 등록 함수2 doRemove - 1) 등록된 이벤트 목록의 버튼을 눌렀을 때 삭제 함수 1까지는 반응이 나오는데, 함수2를 하면 반응이 없습니다. 함수1에 동적으로 추가된 이벤트 목록의 버튼을 눌렀을 때 삭제되도록 이벤트를 넣으면 작동이 됩니다.그러나 함수2로 구분하여 이벤트를 넣으면 작동이 안됩니다. 혹 제가 접근 자체를 잘못한 것일지, 함수2로 구분해서 할 수 있는 방법이 있다면 조언 부탁드립니다.* 배열을 이용하지 않는 방법으로 먼저 공부중입니다.

초보자1212 · Answer

글 자세하게 안봤는데 일단 13번 라인 if 문에 &#61; 하나만 들어가있습니다 오타네요

초보자1212 · Answer

함수2로 구분한다는게 무슨 의미인지 이해가 잘안되는데 다시 설명해주실 수 있을까요?

뇽슝 · Answer

&#64;초보자1212 아래 형식처럼 사용하기 위해서 반복된 코드는 하나의 함수를 묶어봤습니다.사실 제이쿼리로 투두리스트를 만들었던 적이 있는데, 이를 자바스크립트로 바꾸면서 꼬인 부분도 있어요.window.addEventListener('load', function(){ btn.addEventListener('click', doApply); toDoValue.addEventListener('keydown', doApply); removeBtn.addEventListener('click', doRemove); });

킁킁탐정 · Answer

1. 간단한 코드라고해도 리딩으로 오류 여부를 명확하게 할 수 없습니다. 가능하면 다음 질문부터는 오류를 파악하고 싶은 동작하는 프로그램을 https://codesandbox.io/ 에 등록해서 주소를 공유해주시면 훨씬 더 답변하기가 수월합니다. 2. 배열을 사용하지 않아도 DOM 자체가 자료구조이기 때문에 굳이 어렵게 가려는 의도를 파악할수가 없습니다. 회사 업무 또는 개인적인 포트폴리오, 또는 학습 목적이라고 해도 자료구조를 적절하게 잘 사용하는게 훨씬 더 도움이 됩니다. 3. DOM 구조에서 삭제는 button, input 같은것을 감싸고 있는 부모를 삭제하면 됩니다. 예를들어서

형식이라면 div를 DOM에서 삭제하는게 쉬운 방법입니다. 4. HTML 구성에 button이 1개 이상이라면 querySelector가 반환하는 결과는 그중에 가장 처음 1개 입니다. p 안에 있는 button이 아닐 수도 있습니다. 5. 배열을 사용하지 않고 간소하게 작성한 참조할만한 코드는 다음과 같습니다.https://codesandbox.io/s/musing-blackwell-b0epw?file=/src/index.jsfunction app() { var appContainer = document.createElement("div"); var todoListContainer = document.createElement("ul"); var actionContainer = document.createElement("div"); var actionTextInput = document.createElement("input"); var actionSubmitButton = document.createElement("button"); actionTextInput.setAttribute("placeholder", "해야 할 일"); actionSubmitButton.textContent = "추가하기"; var onSubmit = function (event) { var isEnterKey = event.which === 13; var eventFromInput = event.target.contains(actionTextInput); var eventFromButton = event.target.contains(actionSubmitButton); if ((isEnterKey && eventFromInput) || eventFromButton) { var todoItemContainer = document.createElement("li"); var todoItemText = document.createElement("span"); var todoItemRemoveButton = document.createElement("button"); todoItemText.textContent = actionTextInput.value; todoItemRemoveButton.textContent = "삭제하기"; todoItemRemoveButton.addEventListener("click", function (event) { event.target.parentNode.remove(); }); todoItemContainer.appendChild(todoItemText); todoItemContainer.appendChild(todoItemRemoveButton); todoListContainer.appendChild(todoItemContainer); actionTextInput.value = ""; } }; actionTextInput.addEventListener("keydown", onSubmit); actionSubmitButton.addEventListener("click", onSubmit); actionContainer.appendChild(actionTextInput); actionContainer.appendChild(actionSubmitButton); appContainer.appendChild(actionContainer); appContainer.appendChild(todoListContainer); return appContainer;} document.getElementById("app").appendChild(app());

자바스크립트 투두리스트 관련 조언부탁해요

4개의 답변

#scope 목록