2022-01-23 TIL
January 23, 2022
Fact
- 그림으로 배우는 HTTP 150페이지 읽기
- 자바스크립트 리뷰스터디 필수미션
- 캣웹 다시 배포
Feelings
- 자바스크립트로만 코드를 작성하는데 이해안되는 부분이 많다.
Findings
this.$todoList.innerHTML = `<ul>${this.todos
.map((todo, index) =>
todo.isCompleted === true
? `<li data-id=${index}><s>${todo.text}</s></li>`
: `<li data-id=${index}>${todo.text}<button class="todo-complete">완료</button></li>`
)
.join('')}</ul>
`이 코드에서 클릭시 해당 li의 id에 접근하기 위해선
this.$todoList.addEventListener('click', e => {
const index = e.target.closest('li').dataset.id
if (e.target.classList.contains('todo-complete')) {
this.todos[index].isCompleted = true
}
this.render()
})e.target의 closest(‘li’)로 li태그에 접근후 dataset.id로 li태그에 data-id에 접근한다.
Future Action
-
