댓글달기 Part2

투표기능을 만들어보자.

 

기존에 투표기능을 구현하면서 생겼던 문제점은 [에러일지]에 가보면 보실 수 있다.

 

기존에 댓글을 보여줬던 부분 showComment()에 댓글 수를 관리할 수 있는 id를 부여했다.

 

id를 각각의 투표버튼에 부여해도 되지만, 그렇게 되면 관리할 것이 많이 지기 때문에,

 

투표버튼의 상위 노드에다가 id를 부여했다.

function showComment(comment){
   //생략
   voteDiv.id = newId;
   //생략
   let IdAccordingToVoteCount ={
        "commentId" : newId,
        "voteUpCount" : 0,
        "voteDownCount" : 0
    }
    //생략
 }   

그 아이디를 관리 할 수 있도록 객체에 담고, 객체에는 그 댓글에 대한 id, 투표버튼에 대한 카운팅 숫자를 포함해서

배열에 담았다. 배열은 글로벌 지역에 선언했다.

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

function showComment(comment){
  //생략
  let IdAccordingToVoteCount ={
        "commentId" : newId,
        "voteUpCount" : 0,
        "voteDownCount" : 0
    }
    //생략
    idOrVoteCountList.push(IdAccordingToVoteCount);
    /생략
 }   

투표버튼을 클릭한 이벤트 함수를 보자.

 

전달되는 event.target이 "좋아요"버튼인지 "싫어요" 버튼인지 확인 하고. 기존 배열에 저장된 객체의 값을 변경해준다.

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"];              
         } 
       }

   } 
}

추가되는데는 문제가 없다.

 

삭제도 조금 변경했다. 변경한 이유는 그냥 삭제하면, commentId의 값이 초기화 되지 않아서 나중에 관리하기 힘들 것같아서 해봤다.

 

안고쳐주면 빨간부분 숫자들이 지웠다가 새로 생기면 아이디가 겹치는 현상이 발생한다. 

function deleteComments(){ 
    const btn = event.target;
    const list = btn.parentNode.parentNode;//commentList
    //삭제버튼도 마찬가지임. 여러개니깐 인식을 못함. 상위노드에 id 부여함.    
    //삭제버튼 클릭한 배열의 인덱스를 날리면 됨. 뭐 여기까지 해도 상관없는데...
    for(let i=0; i<idOrVoteCountList.length; i++){
        if(idOrVoteCountList[i]["commentId"].toString() === btn.parentNode.id){
            idOrVoteCountList.splice(btn.parentNode.id-1,1);   
        }

    }
    //그다음에 전체 지우기.
    rootDiv.removeChild(list);   

    //메인댓글 카운트 줄이기. 
    if(mainCommentCount.innerHTML <='0'){
        mainCommentCount.innerHTML = 0;        
    }else{
        mainCommentCount.innerHTML--; 
    }
}

기존에 남아있는 댓글들 commentId 초기화  꼭 해줘야한다.

 

안해주면, 중간에 삭제된 값이 앞으로 밀리면서, 기존 commentId 값 충돌로 투표버튼 숫자가 이어서 카운팅 되는 현상

 

이 발생할 것이다.  

function showComment(comment){

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

//기존에 남아있던 id초기화.
function initIdCount(){
    for(let i=0; i<idOrVoteCountList.length; i++){
      if(idOrVoteCountList[i]["commentId"] - i > 1){    
        idOrVoteCountList[i]["commentId"] =  idOrVoteCountList[i]["commentId"] - (idOrVoteCountList.length-(i+1));
      }
    }
}

다음엔 모달창을 이용해서 수정하는 방법을 만들어봐야겠다.

전체코드는 아래와 같다. 너무 지져분하다.

//1.입력받으면 입력값 초기화
//2. 입력값 댓글로들어가기
//3. 댓글 삭제, 수정기능
//4. 좋아요 투표기능
//5. 타임스템프기능
//6. 무작위 아이디  
//7. 댓글 삭제기능
//8. 댓글 수정기능

const inputBar = document.querySelector("#comment-input");
const rootDiv = document.querySelector("#comments");
const btn = document.querySelector("#submit");
const mainCommentCount = document.querySelector('#count'); //맨위 댓글 숫자 세는거.

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


//타임스템프 만들기
function generateTime(){
    const date = new Date();
    const year = date.getFullYear();
    const month = date.getMonth();
    const wDate = date.getDate();
    const hour = date.getHours();
    const min = date.getMinutes();
    const sec = date.getSeconds();

    const time = year+'-'+month+'-'+wDate+' '+hour+':'+min+':'+sec;
    return time;

}

//유저이름 발생기
//유저이름은 8글자로 제한.
function generateUserName(){
    let alphabet = 'abcdefghijklmnopqrstuvwxyz';
    var makeUsername = '';
    for(let i=0; i<4;i++){
        let index = Math.floor(Math.random(10) * alphabet.length);
        makeUsername += alphabet[index];        
    }
    for(let j=0;j<4;j++){
        makeUsername += "*";
    }
    return makeUsername;    
}

function numberCount(event){       
    console.log(event.target.parentNode.id);
    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"];              
         } 
       }

   } 
}

//기존에 남아있던 id초기화 및 새로추가된부분만 코멘트값 이어서 들어옴.
function initIdCount(){
    for(let i=0; i<idOrVoteCountList.length; i++){
      if(idOrVoteCountList[i]["commentId"] - i > 1){    
        idOrVoteCountList[i]["commentId"] =  idOrVoteCountList[i]["commentId"] - (idOrVoteCountList.length-(i+1));        
      }
    }
}


function deleteComments(){ 
    const btn = event.target;
    const list = btn.parentNode.parentNode;//commentList
    //삭제버튼도 마찬가지임. 여러개니깐 인식을 못함. 상위노드에 id 부여함.    
    //삭제버튼 클릭한 배열의 인덱스를 날리면 됨. 뭐 여기까지 해도 상관없는데...
    for(let i=0; i<idOrVoteCountList.length; i++){
        if(idOrVoteCountList[i]["commentId"].toString() === btn.parentNode.id){
            idOrVoteCountList.splice(btn.parentNode.id-1,1);   
        }

    }
    //그다음에 전체 지우기.
    rootDiv.removeChild(list);   

    //메인댓글 카운트 줄이기. 
    if(mainCommentCount.innerHTML <='0'){
        mainCommentCount.innerHTML = 0;        
    }else{
        mainCommentCount.innerHTML--; 
    }
}

//수정창 모달로 만들기
function modifyComments(event){
    const mBtn = event.target;
    const modal = document.createElement('div');
}


//댓글보여주기
function showComment(comment){
    const userName = document.createElement('div');
    const inputValue = document.createElement('span');
    const showTime = document.createElement('div');
    const voteDiv = document.createElement('div');
    const countSpan = document.createElement('span')
    const voteUp = document.createElement('button');
    const voteDown = document.createElement('button');  
    const commentList = document.createElement('div');  //이놈이 스코프 밖으로 나가는 순간 하나지우면 다 지워지고 입력하면 리스트 다불러옴.
    const modifyBtn = document.createElement('button');
    const spacer = document.createElement('div');

    const newId = idOrVoteCountList.length+1; //댓글하나에 달린 ID
    
    //스페이서만들기
    spacer.className = "spacer";
    //삭제버튼 만들기
    const delBtn = document.createElement('button');
    delBtn.className ="deleteComment";
    delBtn.innerHTML="삭제";    
    commentList.className = "eachComment";
    userName.className="name";
    userName.id = newId; //삭제,수정버튼의 상위노드. 
    inputValue.className="inputValue";
    showTime.className="time";
    voteDiv.className="voteDiv";
    voteDiv.id = newId;
    //수정버튼 만들기
    modifyBtn.className = 'modifyBtn';
    modifyBtn.innerHTML = "수정";
    //유저네임가져오기 
    userName.innerHTML = generateUserName();  
    userName.appendChild(spacer);
    userName.appendChild(modifyBtn);
    userName.appendChild(delBtn);  
    //입력값 넘기기
    inputValue.innerText = comment;
    //타임스템프찍기
    showTime.innerHTML = generateTime();
    countSpan.innerHTML=0;
    //투표창 만들기, css먼저 입혀야함. 
    voteUp.className ="voteUp";
    voteDown.className ="voteDown";     
    voteUp.innerHTML = "👍"+0;         
    voteDown.innerHTML = "👎"+0;       
    voteDiv.appendChild(voteUp);
    voteDiv.appendChild(voteDown);

    //댓글뿌려주기       
    commentList.appendChild(userName);
    commentList.appendChild(inputValue);
    commentList.appendChild(showTime);
    commentList.appendChild(voteDiv);
    rootDiv.prepend(commentList);
   
    //아이디에 따른 투표수카운트. 배열에 접근해서 수정하는 방식으로 해야함.
    let IdAccordingToVoteCount ={
        "commentId" : newId,
        "voteUpCount" : 0,
        "voteDownCount" : 0
    }
    
    idOrVoteCountList.push(IdAccordingToVoteCount);
    console.log(idOrVoteCountList);
    
   initIdCount();
    
    
    voteUp.addEventListener("click",numberCount);
    voteDown.addEventListener("click",numberCount);
    delBtn.addEventListener("click",deleteComments);
    modifyBtn.addEventListener("click",modifyComments);

}



//버튼만들기+입력값 전달
function pressBtn(){ 

   const currentVal = inputBar.value;
   
   if(!currentVal.length){
      alert("댓글을 입력해주세요!!");
   }else{
      showComment(currentVal);  
      mainCommentCount.innerHTML++;
      inputBar.value ='';
   }
}

btn.onclick = pressBtn;