[해결] 댓글달기 (투표버튼과 카운트)

 

방법1. 좋아요, 싫어요 버튼의 이벤트리스너에 리스너를 공통으로 하고  거기서 if else로 나눈 점.

function numberCount(event){       
    console.log("5 투료버튼 누름");      //몇번째가 클릭되는지 인식안되는 듯?
     
          if(event.target === voteUp){    
             voteUpCount++;       
             voteUp.innerHTML = "👍"+voteUpCount;
            return  voteUp.innerHTML;
               
          }else if(event.target === voteDown){
             voteDownCount++;   
             voteDown.innerHTML = "👎"+voteDownCount;
             return voteDown.innerHTML;        
          }
    
   
        console.log("6 투료버튼 종료?");   
        
}

위와 같이하니. 발생한 문제점은, 댓글이 한개면 문제없이 카운팅 된다. 하지만, 댓글이 두개 이상부터는 먹통이다. 

console.log찍어보니. 댓글 2개 부터는 console.log 5, 6번 순으로 바로 찍힌다. 댓글이 하나일때는 console.log 5번만 찍혔다..

 

 

방법2. 이벤트리스너를 각각 버튼에게 부여하고 로직을 분리한 것.

 //투표버튼 이벤트
    voteUp.addEventListener("click",function(event){                   
        voteUpCount++;       
        voteUp.innerHTML = "👍"+voteUpCount;
        return  voteUp.innerHTML;
    }); 
    voteDown.addEventListener("click",function(event){
        voteDownCount++;   
        voteDown.innerHTML = "👎"+voteDownCount;        
        return voteDown.innerHTML; 
    });

문제점 : 두개 이상의 댓글이 발생시, 기존값을 따로 저장해놓고, 두번째 댓글 투표버튼에 대한 카운팅을 초기화해서 가야하는데.. 방법을 모르겠다. 떠오르지 않는다. 

 

19년 4월 3일 카운팅과 초기화 해결했다.

 

1. 원인 : 몇번째가 인식되는지 구분자가 없어서 벌어진 일.

 

2. 해결 방법 : 우선 방법 1로 진행했다. 

   

   설명을 하자면, 값을 기억할 수 있게, 배열을 만들고, 배열안에 오브젝트형태로 id와 투표버튼 카운트를 담아서 

   함수를 전달했다. 

  

  =>  먼저 값을 만들고 배열에 저장시킨 후 버튼 클릭에 따른 이벤트 함수에서 배열안에 객체 값을 수정하는

        방식으로 했다.

 

 voteDiv가 투표버튼을 감싸고 있는 상위노드이므로, 카운트 수(=id)를 voteDiv에 부여하는 것이 관리하기 용이하기

 

 때문에 voteDiv에 부여를 했다.

//글로벌로 뺏음. 값을 저장하기 위해서.
let idOrVoteCountList=[];

function showComment(comment){

    //생략
    const voteDiv = document.createElement('div');
    
    //생략
    const newId = idOrVoteCountList.length+1; //댓글하나에 달린 ID
    
   //생략
    voteDiv.className="voteDiv";
    voteDiv.id = newId;
    
    //생략
    voteDiv.appendChild(voteUp);
    voteDiv.appendChild(voteDown);

    //생략
    commentList.appendChild(voteDiv);    
   
    //아이디에 따른 투표수카운트. 배열에 접근해서 수정하는 방식으로 해야함.
    let IdAccordingToVoteCount ={
        "commentId" : newId,
        "voteUpCount" : 0,
        "voteDownCount" : 0
    }
    
    idOrVoteCountList.push(IdAccordingToVoteCount);   
    
    //생략
    
    voteUp.addEventListener("click",numberCount);
    voteDown.addEventListener("click",numberCount);
    
   //생략

}

이벤트 함수에서 배열의 객체에 접근해서 값을 변경해주는 방식으로 함.

function numberCount(event){       
    for(let i=0; i<idOrVoteCountList.length; i++){  
        if(event.target.className === "voteUp"){                       
            
           //event.target.parentNode.id 값이 string이기 때문에 이 값을 Number처리하던지, idOrVoteCountList[i]["commentId"]이 값을 string처리해야 넘어감.
           if(idOrVoteCountList[i]["commentId"].toString() === event.target.parentNode.id){                
               idOrVoteCountList[i]["voteUpCount"]++;               
               event.target.innerHTML = "👍"+idOrVoteCountList[i]["voteUpCount"];
           }       
         
         }else if(event.target.className === "voteDown"){
           if(idOrVoteCountList[i]["commentId"].toString() === event.target.parentNode.id){
               idOrVoteCountList[i]["voteDownCount"]++;
               event.target.innerHTML = "👎"+idOrVoteCountList[i]["voteDownCount"];              
         } 
       }

   } 
}