[Todolist_Basic] Step 7. 수정 버튼 생성하기

Step 7. 수정 버튼 생성하기

글씨 부분을 클릭해야 수정을 할 수 있는 기능은 정말 야박한 기능이다.

전혀 직관적이지 않기 때문이다.

그렇기 때문에 우리는 아이콘을 추가하여

그 아이콘을 클릭해서 수정할 수 있도록 하자.

font-awesome 이용하기

>> font-awesome 에 대한 포스팅 보러가기 >>

수정하기 위한 아이콘은 왠지 연필 모양의 아이콘이 좋을 것 같아서,

font-awesome 홈페이지에서 연필 모양 아이콘을 찾아왔다.

아이콘을 생성하기 위해서는 i 태그를 생성해야한다.

그리고 font-awesome을 적용하기 위해서는 icon 태그에 클래스 명을 지정해야한다.

.className 속성을 활용하여 해결하자.

원래는 글씨를 클릭했어야 수정이 가능했던 이벤트를

아이콘을 클릭하면 가능하도록 바꿔준다.

main.js code+>

var pencilIcon = document.createElement('i');
pencilIcon.className = 'fa fa-pencil';
pencilIcon.onclick = renameItem;
 
listItem.appendChild(pencilIcon);

style.css code+>

.fa-pencil{
    float:right;
    padding: 5px;
}

오른쪽에 있어야 보기 좀 좋지 않을까해서 float 속성을 right로 줬고,

위치 조정은 margin 보다 padding 으로 아이콘을 클릭할 수 있는 범위를 넓혀준다.

모양도 그럴듯 하게 구성된 것 같다.

그런데, 또 문제가 발생했다.

원래 한 곳을 고치면 다른 한 곳이 안되는 것이 프로그래밍이라고 하지 않았던가.

수정을 하기 위해서 연필 아이콘을 클릭하고 수정하고자 하는 text를 입력했더니,

입력한 text가 연필 아이콘 옆에 삽입된다.

rename 함수를 살펴보자.

원인은 this에 있었다.

this로부터 읽어오는 id 값을 제대로 받지 못한 것이다.

this가 가리키는 것이 원래는 span이었는데 pencilIcon으로 바뀌었으므로,

그에 해당하는 변경을 해주면 된다.

main.js code>

function renameItem(){
  //this === pencilIcon
  var newText = prompt("what should this item be renamed to?");
  if(!newText || newText === "" || newText === " ") return false; // blank 방지
  var spanId = this.id.replace('pencilIcon_', '');
  var span = document.getElementById('item_' + spanId);
 
  span.innerText = newText;
} 

- Step 7. The end -

 

Step 8. '수정' 버튼 사라지고 나타나게 하기. [이동]