[Javascript] todolist 구현 version.2
2021. 3. 9. 18:21
구현한거 바로 나오는 기능있는지 몰랐는데 신기하다;
아무튼 오늘 국비수업에서 바로 todolist만들지는 몰랐다;
오늘 수업듣고 만들었으면 어제 2시간동안 할거 30분이면 끝냈을텐데 ㅠ....
수업 실습하면서 만들어본 예제이고 어제랑 차이가 있다면
1. html부분이 간결해졌고
2. addEventListener를 사용하는 법에 익숙해져서 대부분 이걸로 이벤트 처리를 했음
3. 그리고 어제는 입력값을 바로바로 li태그를 생성시키면서 추가시켰다면 이번엔 배열에 추가해보았음
코드작동 방식
밑의 빈칸에 값을 입력하고 추가를하면 값이 하나씩 추가된다.
추가된 값 옆에 X버튼 누르면 값이 삭제됨
[삭제]버튼 누르면 배열 마지막 값부터 삭제됨
============================================================
코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var itemList = [];
window.onload = function(){
var addBtr = document.getElementById("add");
var removeBtr = document.getElementById("remove");
addBtr.addEventListener("click", addList); //추가버튼 클릭시 addList함수 호출
removeBtr.addEventListener("click", removeList); //삭제버튼 클릭시 removeList함수 호출
}
function addList(){
var item = document.getElementById("item").value;
if(item != null){}
itemList.push(item);//배열 추가
document.getElementById("item").value = ""; // 공백으로 만들기
document.getElementById("item").focus(); // 포커스
showList();
}
function removeList(){
if(itemList.length != 0){
itemList.pop();
}
showList();
}
function showList(){
var result = "<ul>";
for(var i=0; i<itemList.length;i++){
result += "<li>" +itemList[i] + " <span class = 'sub' id="+i+">X</span></li>";
}
result += "</ul>"
document.querySelector("#itemList").innerHTML = result;
var sub = document.querySelectorAll(".sub");
for(var i=0; i<sub.length;i++){
sub[i].addEventListener("click", subList);
}
}
function subList(){
var id = this.getAttribute("id"); //this는 현재 이벤트가 발생된 span태그
console.log("substracted id = ", id);
itemList.splice(id, 1);//
showList();
}
</script>
</head>
<body>
<input type = "text" id="item" autofocus ="true"> <!-- autofocus : 커서 깜빡임 -->
<button type = "button" id="add" class = "button">
추가</button>
<button type = "button" id="remove" class = "button">
삭제</button>
<div id = "itemList"></div>
</body>
</html>
'skill > 뭐든지 만들어보기' 카테고리의 다른 글
| [Spring] slack webhook 사용해서 message 보내기(환경설정 및 활용) (0) | 2021.06.08 |
|---|---|
| [JAVA] JSP/Servlet으로 카카오 로그인 구현하기 (0) | 2021.04.17 |
| [Javascript] 구매자정보를 받는사람정보에 복사하기(쇼핑몰 주문) (0) | 2021.03.09 |
| javascript 조금 배우고 무작정 todolist 만들어보기 (0) | 2021.03.09 |