<코드기록>
<html>
<body>
<div id="wrapper">
<h2>여행 준비물 점검 목록</h2>
<form onsubmit="return false">
<input type="text" id="item" autofocus="true" onkeypress="if(event.keyCode===13) {addList()};" />
<button type="button" id="add" class="addBtn">추가</button>
</form>
<div id="itemList"></div>
</div>
<script src="./js/checklist.js"></script>
</body>
<Js>
let itemList = [];
let addBtn = document.querySelector("#add");
addBtn.addEventListener("click", addList);
function addList() {
let item = document.querySelector("#item").value; //value는 input창에 입력된 값을 말한다.
if (item !== null) {
itemList.push(item); //배열안에 value를 집어 넣을것.
document.querySelector("#item").value = ""; //다음 값을 입력하기 편하게 입력창을 리셋
document.querySelector("#item").focus();
}
showList(); // 목록을 화면에 보여주는 함수
}
function showList() {
let list = "<ul>";
for (let i = 0; i < itemList.length; i++) {
list += "<li>" + itemList[i] + "<span class = 'close' id = " + i + "> X </span></li>"
}
list += "</ul>";
document.querySelector("#itemList").innerHTML = list;
const remove = document.querySelectorAll(".close"); //span태그에 X 만든곳의 class가 close다.
for (let i = 0; i < remove.length; i++) {
remove[i].addEventListener("click", removeList); // X버튼 클릭시 삭제함수가 실행된다.
}
}
function removeList() {
const id = this.getAttribute("id");
itemList.splice(id, 1); //해당 id를 가진 값을 추출한다.
showList(); // 나머지 값들을 다시 화면에 띄운다.
}<실행화면>
<this 사용>
X버튼을 눌렀을 때 실행되는 삭제 함수인데,
여기서 사용된 this 예약어는 객체에서 이벤트가 발생했을 때 그 이벤트의 대상을 알아내기 위해 사용된다.
(this는 상황에 따라 다르게 사용되므로 항상 이벤트 발생 요소를 가져오는것은 아니다.)
누른버튼(this)의 id값을 가져와서 id 변수에 저장한 것.
<엔터키를 눌렀을 때 add 기능 만들기>
1. form 태그에 onsubmit="return false"를 추가
- Submit 하기 전에 사용자가 입력한 내용을 자바스크립트로 먼저 체크하는 동작을 할 수 없는 문제점 때문에 사용됨
- 추가로 해당 form엘레먼트의 자식으로 <input type="submit"> 이
존재하는 경우 <input type="text">에 엔터키 이벤트 발생시 포커스가
<input type="submit">으로 이동하는 현상이 있음.
2. 13은 엔터키를 의미한다. 엔터를 누르면 addList 함수가 실행됨.
※ 본 포스팅은 개인 공부 기록을 목적으로 남긴 글이며 본 사실과 다른 부분이 있다면 과감하게 지적 부탁드립니다.
'Javascript > Javascript 기본' 카테고리의 다른 글
| [드림코딩 JS] #2 data types, let vs var, hoisting (0) | 2020.09.26 |
|---|---|
| [드림코딩 JS] #1 script async 와 defer의 차이점 (0) | 2020.09.24 |
| Array 객체 (0) | 2020.07.26 |
| 생성자 함수를 사용해 객체생성 (0) | 2020.07.24 |
| 이미지 슬라이드 쇼 (0) | 2020.07.24 |
댓글