[todo-list] 아이콘 추가, 제거하기

리스트를 작성하여 submit하면 작성한 문구와 함께 check button 아이콘을 추가하고 싶었다.

 

todo.js

Font Awesome 에서 원하는 아이콘 찾아서 사용하면 된다.

 

---

 

문제는 .. non-check-button을 클릭하면 check-button으로 바뀌도록 하고 싶었던 것이다.

button.setAttribute("onclick", "handleButtonClick()");

이 코드를 추가하고,

todo.js

handleButtonClick 함수를 추가해주면 된다.

 

근데 또 문제가 생기고 말았다.

리스트를 하나 더 추가할 때마다 먼저 작성한 리스트의 checkbutton이 없어지는 것이다....

 

이유는 ... 

const button = document.createElement("i");

-> 이 코드를 전체적으로 통용하여 사용하기 위해 paintToDo 함수 바깥으로 옮겼기 때문이다.

-> 그렇다고 이 코드를 paintToDo 함수 안에 위치시키면,

handleButtonClick 함수는 button이 무엇인지 .. 모를테니.. ㅠㅠ 

-> 지역변수 전역변수 개념 사용

 

어떻게 해야함?

 

---

💥해결💥

 

전역변수로 사용하고 싶은 변수를,

var, const, let 등을 사용하지 말고 바로 변수 적용하기 !

 

함수 내부에서 var 키워드를 사용하지 않고 변수를 선언하면, 해당 변수는 지역 변수가 아닌 전역 변수로 선언된다.

// const 사용 하지 말고 !
const nonCheckButton = document.createElement("i");
// 이렇게 !
nonCheckButton = document.createElement("i");