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

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

Step 들어가기 전에,

totalItems 변수를 수정하자.

총 개수를 나타내기는 하지만

하나의 li 태그를 가리키는데 사용되었다.

한 문서에서 unique 한 번호를 부여할 때 사용하는 것을 id 라고 한다.

그리고 흔히들 id를 시간을 기반으로 한 난수 생성을 통해서 한다.

그래서 이번 기회에 난수 생성을 통해 id를 부여해보겠다.

var date = new Date( );
var id = "" + date.getHours() + date.getMinutes() + date.getSeconds() + date.getMilliseconds();

이렇게 id 값을 부여한다.

앞에 “” 로 공백을 준 이유는 String 으로 인식하게하여 더 큰 수를 만들기 위함이다.

우리는 글씨를 클릭해서 내용을 수정할 수 있게 하고,

리스트의 여백을 더블 클릭해서 삭제하는 기능을 구현할 것이다.

onclick 과 ondblclick 이 겹치면 onclick 두번으로 인식하게 되는데,

이것을 조정하는 것이 조금 복잡해서 이렇게 구현할 계획이다.

span.onclick = renameItem;

글씨를 감싸고 있는 span 에 이벤트를 추가한다.

listItem.id = 'li_' + id;
listItem.ondblclick = removeItem;

li 태그에 이벤트를 추가하기 위해 id 를 지정해준다.

이제 renameItem 함수를 구현해보자.

팝업창을 띄워서 값을 입려받은 다음, 그 값을 받아서 수정하는 최대한 간단한 방법으로 구현하겠다.

이럴 땐 prompt라는 메소드를 사용하면 된다.

새로운 값을 innerText 값에 넣어주면 된다.

코드는 포스팅 마지막에 확인해보면 된다.

이제 removeItem 함수를 구현해보자.

삭제하기 위해서 id 값을 추출해내야 한다.

이 비슷한 과정을 updateItemStatus 함수를 구현할 때 사용했다.

copy & paste 해서 살짝만 고쳐주자.

this가 span이 되므로 cb대신 item 으로 바꿔주면 된다.

삭제를 하는 방법은 보이지 않게 하면 된다.

즉 CSS 속성 중 display 값을 none 으로 해주면 된다. 

main.js code>

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);
 
}

- Step 5. The end -

 

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