Programming Language/JavaScript
JS) 리스트에 입력한 값 추가하는 웹
codingfeature
2023. 1. 11. 01:07
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"></meta>
<title>Todo List</title>
<link href="style.css" rel="stylesheet" type="text/css"></link>
</head>
<body>
<h1 class="main-title">To Do List!</h1>
<div class="list-area">
<ul id="list">
</ul>
</div>
<div class="type-area">
<p><input type="text" id="todo"></p>
<p><input type="button" value="추가" id="submit"></p>
<p><input type="button" value="삭제" id="delete"></p>
</div>
<script src="./script.js"></script>
</body>
</html>
script.js
var list = document.getElementById('list');
var submit = document.getElementById('submit');
var del = document.getElementById('delete');
var input = document.getElementById('todo');
submit.addEventListener('click', clicksubmit);
del.addEventListener('click', clickdelete);
var cnt = 1;
function clicksubmit(){
var temp = document.createElement('li');
temp.setAttribute("id", "li"+cnt);
temp.innerHTML = input.value;
list.appendChild(temp);
cnt++;
}
function clickdelete(cnt) {
var li = document.getElementById('li'+cnt);
list.removeChild(li);
}
style.css
.main-title{
text-align: center;
color:white;
box-sizing: border-box;
width: 100%;
padding: 10px;
background-color: black;
}
.list-area{
text-align: center;
font-size: 200%;
}
.type-area{
text-align: center;
}
ul{
list-style: none;
}
li{
padding:5px;
}
리스트에 새로운 값을 추가하는 것까지 구현하였으나,
clickdelete()함수를 통해 노드 삭제는 아직 애를 먹고 있다.
함수 내 cnt 값 확인을 위해 디버깅을 했는데,
cnt를 제대로 받지 못한 것 같다.
좀더 연구해봐야겠다.