<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.todoList:hover{
color: red;
cursor: pointer;
text-decoration-line: line-through;
}
</style>
</head>
<body>
<section>
<div class="header">
<h1>할일만들기</h1>
<input type="text"/>
<button>클릭</button>
</div>
<div class="list"></div>
</section>
</body>
<script>
let ItemList=[] //아이템 리스트 만들 배열 생성
const InputButton = document.querySelector('button')
let Todo = document.querySelector('input')
Todo.focus(); //input에 커서 깜빡이기
InputButton,addEventListener('keydown', function(e){ //엔터키 눌렀을 때 이벤트 발생
if(e.key === "Enter"){
Click();
}
})
InputButton,addEventListener("click", Click); // 마우스로 버튼 클릭시 이벤트 발생
//할 일 추가
function Click (){
let ListHouse = document.querySelector('.list')
let TodoList = document.createElement('div');
TodoList.className="todoList" // 동적 div에 클래스이름 생성
//리스트생성
TodoList.innerHTML = Todo.value;
ListHouse.appendChild(TodoList);
//빈값 들어오는거 방지
if(TodoList.innerHTML != "" ){
ItemList.push(TodoList.innerHTML); //배열에 input값 넣기
Todo.value = ""; //input창 초기화
}
console.log(ItemList);
//리스트 클릭시 리스트 삭제
TodoList.addEventListener("click",Delete)
function Delete() {
let todoList = document.querySelector('.todoList')
let ListHouse = document.querySelector('.list')
//리스트 삭제
ListHouse.removeChild(this);
//배열 삭제
ItemList.pop(this);
console.log(ItemList);
}
}
</script>
</html>의문점
InputButton,addEventListener('keydown', function(e){ //엔터키 눌렀을 때 이벤트 발생
if(e.key === "Enter"){
Click();
}
})
// function(e) -> function() 으로 바꾸고 했더니
// Uncaught ReferenceError: e is not defined 에러가 뜸. 왜지?'프로젝트' 카테고리의 다른 글
| 지출 비용 계산 (0) | 2021.08.06 |
|---|---|
| 검색기능 구현하기 (0) | 2021.08.04 |
| JavaScript Drum Kit-2_(script 시작) (0) | 2021.05.27 |
| JavaScript Drum Kit-1_(html,css코드) (0) | 2021.05.27 |
| 별찍기(javascript) (0) | 2021.05.11 |
