수정 logic
-
수정 만드는 부분을 주석으로 정리하면서 작업했다.
수정버튼 클릭 시 동작
해당 비밀번호가 맞아야 수정이 가능
해당 배열의 index를 id로 넣을 필요가 있음
수정 버튼의 comment data 가져오기
수정 버튼의 review-comment
comment 입력창이 나오면서(comment는 그대로 나오게) 수정할 수 있게
저장 버튼이 나타나야 함 (수정, 삭제는 display none)
저장 버튼을 클릭하면, index를 찾아서 해당 index의 review를 변경해준다.index 기반으로 user-review 찾아야 함
Error
1) 수정, 버튼에 이벤트를 생성하는 과정에서 로그가 생각한 대로 작동하지 않고 queryselector가 제대로 작동하지 않았다.
=> displayComments(등록되어 있는 리뷰를 가져와서 보여주는 함수)가 먼저 실행되지 않아서 선택자를 찾아오지 못했던 것이였다.
2) posting을 하는 부분에서 2번째 댓글부터 공백을 입력하면 리뷰를 입력해주세요 alert가 나와야하는데 나오지 않았다.
value값을 console.log로 확인해보니 위에 있던 text값이 불러와졌다.
- 해결
HTML을 만들어 붙이는 과정에서 숨겨져 있는 textbox의 id와 메인으로 입력하는 textbox의 id가 write-comment로 동일했기에 같은 값이 나왔던 것이였다.
id를 수정해주고 css도 같이 수정해주니 잘 동작한다.
Element.closest()
현재의 요소에서 입력된 선택자를 탐색하고, 가장 가까운 선택자를 가져온다. 만족하는 것이 없다면 Null return
자기 자신도 포함한다.
Element.parent()
현재의 요소에서 자신의 부모를 return
자기 자신 제외
element.dataset
const updateButtons = document.querySelectorAll(".comment-edit");
updateButtons.forEach((button) => {
button.addEventListener("click", () => {
console.log(button.dataset);
updateReview();
});
});버튼은 각 버튼들을 가지고 있고, button.dataset을 살펴보면 첫번째 수정을 눌렀을 때, index:0 두번째 버튼은 index:1로 잘 나오는 것을 확인할 수 있다.
해결해야 할 일
수정하는 부분에서 취소를 했다가 다시 비밀번호를 입력하면 alert가 두번 출력된다.
