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

Step 8. 수정 버튼 사라지고 나타나게 하기

아 그런데 이대로 두기가 좀 그렇다.

왜냐면 수정은 어쩌다 한 번 하게 되는데 아이콘이 계속 보이고 있으니 거슬린다.

그래서 마우스를 올리면 아이콘이 나타나게 해야겠다.

일단 CSS로 가서 default visible 값을 조정하자.

일단 안보여야 하니까,

hidden 으로 조정해준다.

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

마우스를 올리면… 이라는 이벤트는 mouseover 이다.

listem 아이템에는 이미 ondblclick 이라는 이벤트가 바인딩되어 있다.

그렇기 때문에 addEventListener( ) 를 사용하여 이벤트를 추가해줘야 한다.

listItem.addEventListener('mouseover', mouseover);

이제 mouseover 함수를 정의하자.

function mouseover(){
  var pencilIcon = document.getElementsByClassName('fa-pencil');
  pencilIcon.style.visibility = 'visible';
}

아까 아이콘을 추가할 때 클래스 명을 정의했으니까

그 클래스 이름으로 아이콘을 잡아서 이벤트를 추가하면 될 것이다.

...

근데 이렇게 하면 작동하지 않는다.

바로 getElementsByClassName( ) 메소드의 속성 때문이다.

메소드를 자세히 살펴보면 element가 -s 가 붙어서 복수이다.

동일한 class 명은 html 상에서 존재할 수 있기 때문에, 여러 클래스를 get하는 것이다.

때문에 getElementsByClassName( ) 메소드로 받으면, 배열이 반환된다.

즉, mouseover 된 태그의 id를 읽어와야 하는 것이다.

우리는 mouseover되는 list에만 icon을 나타나게 하기 위해,

id 값을 다시 지정해줘야 한다.

여태껏 해왔던 작업들이라 어렵지는 않을 것이므로 설명은 생략하고 코드만 올리겠다.

근데 이렇게 하면 어떻게 되는지 짐작가는가?

웃기지만 어렵게 숨겨놓은 수정 아이콘이 한 번 나타나면 다시 사라질 생각을 안한다.

정말 슬프다.

그래서… mouseout 이벤트를 추가해줘야 한다

main.js code>

function mouseover(){
  //this === li
  var pencilIconId = this.id.replace('li_','');
  var pencilIcon = document.getElementById('pencilIcon_' + pencilIconId);
  pencilIcon.style.visibility = 'visible';
}
 
function mouseout(){
  //this === li
  var pencilIconId = this.id.replace('li_','');
  var pencilIcon = document.getElementById('pencilIcon_' + pencilIconId);
  pencilIcon.style.visibility = 'hidden';
} 

- Step 8. The end -

 

Step 9. Donelist에서 다시 Todolist로 보내기. [이동]