<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=!, initial-scale=1.0">
<title>ToDoList</title>
</head>
<body>
<h1>To Do List</h1>
<form >
<input id='toDO' type="text">
<button id="add-button">추가</button>
</form>
<ul></ul>
<script src="./todolist.js"></script>
</body>
</html>
form을 제출하게 되면 페이지가 reload현상이 일어난다.
reload 현상 원인
1) form 태그 안에 button이 같이 있을 때
button의 type을 따로 지정하지 않으면 submit으로 설정되어 있기 때문에 버튼을 클릭하게 된다면 새로고침 현상이 일어난다.
-> form밖에 있는 button을 누르면 reload 현상이 일어날까? (x)
해결방법
1) button의 type으로 button을 준다.
2) js 코드에 event.preventDefault()로 제어 해준다.
input.value
const button = document.querySelector('#add-button');
const ul = document.querySelector('ul');
const input = document.querySelector('input');
button.addEventListener("click",(event)=> {
event.preventDefault();
const li = document.createElement('li');
li.innerText =input.value;
ul.appendChild(li);
console.log(`input:`, input);
console.log(`input.value:`, input.value);
})
아니 처음에 왜 input.value값이 안 받아와지지 않더니
const input = document.querySelector('#toDO');
를 하였기 때문에 input은 input의 id 값에만 접근이 가능하기 때문에 input.value의 값을 불러오지 못한 것이었다.
따라서 나는 console.log()를 통해 input.value에 대해서 알아 보려고 한다.
-> input.value를 사용하기 위해서는 element가 아닌 node를 불러와야 한다.
element vs node
https://www.zerocho.com/category/JavaScript/post/573b4165a54b5e8427432948
https://hianna.tistory.com/711
input창 공백으로 만들기
input.value = '';이 코드를 추가해주면 공백으로 만들 수 있다.
이벤트
const button = document.querySelector('#add-button');
const ul = document.querySelector('ul');
const input = document.querySelector('input');
button.addEventListener("click",(event)=> {
event.preventDefault();
const li = document.createElement('li');
const del_button = document.createElement('button')
li.innerText =input.value;
del_button.innerText = '삭제'
ul.appendChild(li);
li.appendChild(del_button);
console.log(`input:`, input);
console.log(`input.value:`, input.value);
del_button.addEventListener('click',del_item)
input.value = '';
})
const del_item = (event) => {
const target = event.target.parentElement;
target.remove();
console.log(event.target)
}
삭제 버튼을 누를시 부모 요소인 li요소를 모두 삭제 시키는 코드이다.
코드를 짜다가 문득 궁금한 점이 생겼다.
const del_item = (event) => {
} 함수에서 event은 왜 사용하는 걸까?
console.log(event.target)을 통해
이벤트를 발생시킨 객체에 대해 출력해보자!
삭제 버튼을 눌러 이벤트를 발생 시켰기 때문에 위와 같이 출력 될 것이다.
아래 블로그에 잘 설명되어 있다.
https://velog.io/@ssarr_i/js-functione%EC%97%90-%EB%8C%80%ED%95%98%EC%97%AC
코드 최종
const button = document.querySelector('#add-button');
const ul = document.querySelector('ul');
const input = document.querySelector('input');
button.addEventListener("click",(event)=> {
event.preventDefault();
addItem(input.value)
console.log(`input:`, input);
console.log(`input.value:`, input.value);
input.value = '';
})
const addItem = (text) => {
const li = document.createElement('li');
const deleteButton = document.createElement('button')
li.innerText =text;
deleteButton.innerText = '삭제'
ul.appendChild(li);
li.appendChild(deleteButton);
deleteButton.addEventListener('click',deleteItem) // 삭제 버튼에 이벤트 리스너 추가
}
const deleteItem = (event) => {
const target = event.target.parentElement; // 삭제 버튼의 부모 요소 li 선택
target.remove(); // li dyth tkrwp
console.log(event.target);
}
