index.html
전체 코드
<!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>Momentum App</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<form id="todo-form">
<input type="text" placeholder="Write a To Do and Press Enter" required />
</form>
<ul id="todo-list"></ul>
<script defer src="js/todo.js"></script>
</body>
</html>코드 상세
<form id="todo-form">
<input type="text" placeholder="Write a To Do and Press Enter" required />
</form>
<ul id="todo-list"></ul>
위와 같이 브라우저에서 To do list를 등록하고자 하는 todo-form이라는 Id를 가진 form 태그가 있다.
submit 을 하면 새로고침 되는 게 아니라, 그저 사용자가 입력한 정보가 <ul> 태그 안에 동적으로 생성되게 하고 싶다.
<script defer src="js/todo.js"></script>
해당 기능을 만들 todo.js 파일을 js 폴더 안에 만들고 import 한다.
todo.js
전체 코드
const toDoForm = document.getElementById("todo-form");
function handleToDoSubmit() {
}
toDoForm.addEventListener("submit", handleToDoSubmit);코드 상세
form 태그 가져오기
- getElementById
const toDoForm = document.getElementById("todo-form");html에서 todo-form을 id로 가진 Element를 가져오는 변수를 선언한다.
submit 이벤트 방지 만들기
- addEventListener
function handleToDoSubmit() {
}
toDoForm.addEventListener("submit", handleToDoSubmit);어떤 동작도 하지 않는 function을 만들고, toDoForm에서 submit 액션이 일어날 때 해당 function이 작동되도록 하면 된다.
