[해결] 댓글달기-모달창구현 중 에러

댓글이 하나일때는 에러가 나지 않는데.. 2개 이상부터는 에러가 난다. 하지만 수정도 된다... ;;;뭐가 문제지..

//수정창 모달로 만들기
function modifyComments(event){ 
    
    const mBtn = event.target;

    //모달창 만들기
      const modal = document.createElement('div')
      const modalOverlay = document.createElement('div');
      const modalContent = document.createElement('div');
      const cancleBtn = document.createElement('button');
      const okBtn = document.createElement('button');
      const input = document.createElement('input');
      const span = document.createElement('span');
      modal.className = "modal hidden";
      modalOverlay.className ="modal__overlay";
      modalContent.className ="modal__content";
      okBtn.id = "ok";
      okBtn.innerHTML="수정";
      cancleBtn.id = "cancle";
      cancleBtn.innerHTML = "취소";
      input.id = "modifyVal";
      input.placeholder = "변경할 내용을 입력하세요";
      span.id ="inBtn";

      span.appendChild(okBtn);
      span.appendChild(cancleBtn);
      modalContent.appendChild(input);
      modalContent.appendChild(span);
      modal.appendChild(modalOverlay);
      modal.appendChild(modalContent);
      rootDiv.appendChild(modal);  

      modal.classList.remove("hidden");
      
      cancleBtn.addEventListener("click",function(){
        modal.classList.add("hidden");
      });
      
     
      okBtn.addEventListener("click",function(event){       
        console.dir(event.target);       

        for(var i=0; i<idOrVoteCountList.length; i++){                  
            if(idOrVoteCountList[i]["commentId"].toString() === mBtn.parentNode.id){                
                idOrVoteCountList[i]["commentValue"] = input.value;  
                //childNode의 가장최근값은 인덱스 0번부터 시작한다. idOrVoteCountList인덱스하고 반대임.
                for(var j=idOrVoteCountList.length-1; j>=0; j--){                 
                    if(rootDiv.children[j-i].children[1].id === idOrVoteCountList[i]["commentId"].toString()){
                        rootDiv.children[j-i].children[1].innerHTML = input.value;               
                    }
                }
                
                
                // console.dir(rootDiv.childNodes[0].childNodes[1].id);
                // console.dir(rootDiv.childNodes[0]);
                //modal.classList.add("hidden");                 
            }    
        }
      });

}

일단 에러 내용이  Uncaught TypeError: Cannot read property이다.

 

이 에러는 크롬에서 정의되지 않은 객체의 property를 읽어내거나 method를 호출했을 때 발생한다.

 

내가 선택한 방식은 event.target으로 부터 ID를 찾아가야 몇번째 댓글의 수정버튼을 클릭했는지 크롬에서 기억할 수 있

 

는데, 나는 역으로 DOM의 끝부분부터 찾아내려왔다. 그러니깐 1개일때는 이상없이 수정되었지만, 2개부터는 에러가 나

 

는 것이다.

 

그래서 코드를 바꿔봤다. 

 

 okBtn.addEventListener("click",function(event){       
        console.dir(mBtn.parentNode.parentNode.children[1]);       

        for(var i=0; i<idOrVoteCountList.length; i++){                  
            if(idOrVoteCountList[i]["commentId"].toString() === mBtn.parentNode.id){                
                idOrVoteCountList[i]["commentValue"] = input.value;  
                //수정버튼누르면 변경.              
                mBtn.parentNode.parentNode.children[1].innerHTML = input.value;
                modal.classList.add("hidden");                 
            }    
        }
      });

맨 밖에 모달창 떳을때 event.target값을 mBtn에 미리 저장했는데, 그것을 이용했다.

 

댓글은 Span#inputValue값이 가지고 있기때문에. 그 곳의 위치가  아래와 같다.

 mBtn.parentNode.parentNode.children[1]

그 곳을 찾아서 값을 변경해주면? 끝난다.