[오늘의 삽질] 자바스크립트 - 할일 목록 삭제버튼 클릭시 콘솔에 배열 확인하기

 

 

 

 

노마드코더\Vanilla JS\Changes\실습\Practice\DAY8.9\class_practice\todo.js

 

input 한 할일 목록 4개 중에 2개를 지우면

console.log(cleanToDos, toDos); 로 보여지는 cleanToDos의 갯수가 2개이어야 하는데

계속 2개 3개를 지워도 cleanToDos의 갯수가 3이었다.

 

 

슬랙에 어떤 친절하신 분이 다시 개념을 알려주셨는데

 

1.pendingList(배열)의 값을 한개씩 가져와서 toDo에 담는다

2.toDo에 담긴 id와 삭제버튼을누른 li의 id값을 비교한다

3.비교하여 일치하지 않은 값(삭제버튼 누르지 않은것)은 cleanToDos에 담는다 이렇게 되서 결과적으로 cleanToDos에는 삭제 하지않은 것들로 이루어진 배열이 완성되게 됩니다 그것을 다시 원래의 배열(toDos)에 담아서 사용하는것이죠

 

toDos = cleanToDos; 이코드를 작성해야 연속적으로 테스트가 가능하실꺼에요

toDos에는 아직 반영이 안되서 기존의 값으로 계속 그대로 남는거죠

 

const TODOS_LS="toDos";

let toDos=[];

 

function deleteToDo(event){

    const btn = event.target;

    const li = btn.parentNode;

    toDoList.removeChild(li);

    const cleanToDos = toDos.filter(function(toDo){

      console.log(toDo.id, parseInt(li.id));

      return toDo.id !== parseInt(li.id);

    });

    toDos = cleanToDos;

    saveToDos();

    console.log(cleanToDos, toDos);

}

 

function saveToDos() {

    localStorage.setItem(TODOS_LS, JSON.stringify(toDos));

  }

 

결론 :  에러는 아니였고 내가 개념을 이해하지 못한 거였음. 

여기서 toDos는 배열변수 인데 이 변수 안에 넣어야 localStorage에 저장되어

내가 원하던 결과인 cleanToDos의 갯수를 제대로 반영할수있는것이다.

고로 toDos = cleanToDos;를 작성해야 함.

그리고 saveToDos() 함수를 불러와 실행시켜 localStorage에 저장시킴

 

잘 되고 있는 결과물 - 목록에서 하나와 둘을 지웠을 때 모습