본문 바로가기

Dev.Project/Todolist_project

[Todolist_Basic] Step 5. listItem 수정하고 삭제하기



Step 5. listItem 수정하고 삭제하기


Step 들어가기 전에,
totalItems 변수를 수정하자.
총 개수를 나타내기는 하지만
하나의 li 태그를 가리키는데 사용되었다.
한 문서에서 unique 한 번호를 부여할 때 사용하는 것을 id 라고 한다.
그리고 흔히들 id를 시간을 기반으로 한 난수 생성을 통해서 한다.
그래서 이번 기회에 난수 생성을 통해 id를 부여해보겠다.
1
2
var date = new Date( );
var id = "" + date.getHours() + date.getMinutes() + date.getSeconds() + date.getMilliseconds();
cs
이렇게 id 값을 부여한다.
앞에 “” 로 공백을 준 이유는 String 으로 인식하게하여 더 큰 수를 만들기 위함이다.

우리는 글씨를 클릭해서 내용을 수정할 수 있게 하고,
리스트의 여백을 더블 클릭해서 삭제하는 기능을 구현할 것이다.
onclick 과 ondblclick 이 겹치면 onclick 두번으로 인식하게 되는데,
이것을 조정하는 것이 조금 복잡해서 이렇게 구현할 계획이다.

1
span.onclick = renameItem;
cs
글씨를 감싸고 있는 span 에 이벤트를 추가한다.

1
2
listItem.id = 'li_' + id;
listItem.ondblclick = removeItem;
cs
li 태그에 이벤트를 추가하기 위해 id 를 지정해준다.


이제 renameItem 함수를 구현해보자.
팝업창을 띄워서 값을 입려받은 다음, 그 값을 받아서 수정하는 최대한 간단한 방법으로 구현하겠다.
이럴 땐 prompt라는 메소드를 사용하면 된다.
새로운 값을 innerText 값에 넣어주면 된다.
코드는 포스팅 마지막에 확인해보면 된다.


이제 removeItem 함수를 구현해보자.
삭제하기 위해서 id 값을 추출해내야 한다.
이 비슷한 과정을 updateItemStatus 함수를 구현할 때 사용했다.
copy & paste 해서 살짝만 고쳐주자.
this가 span이 되므로 cb대신 item 으로 바꿔주면 된다.
삭제를 하는 방법은 보이지 않게 하면 된다.
즉 CSS 속성 중 display 값을 none 으로 해주면 된다. 

main.js code>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
function renameItem(){
  //this === span
  var newText = prompt("what should this item be renamed to?");
  if(!newText || newText === "" || newText === " "return false// blank 방지
 
  this.innerText = newText;
}
 
function removeItem(){
  //this === span
  var listItemId = this.id.replace('li_''');
  document.getElementById('li_' + listItemId).style.display = "none";
}
 
function addNewItem(list, itemText){
 
  var date = new Date();
  var id = "" + date.getHours() + date.getMinutes() + date.getSeconds() + date.getMilliseconds();
 
  var listItem = document.createElement('li');
  listItem.id = 'li_' + id;
  listItem.ondblclick = removeItem;
 
  var checkBox = document.createElement('input');
  checkBox.type = 'checkBox';
  checkBox.id = 'cb_' + id;
  checkBox.onclick = updateItemStatus;
 
  var span = document.createElement('span');
  span.id = 'item_' + id;
  span.innerText = itemText;
  span.onclick = renameItem;
 
  listItem.appendChild(checkBox);
  listItem.appendChild(span);
  list.appendChild(listItem);
 
}
cs



- Step 5. The end -

 


Step 6. Donelist 생성하기. [이동]