210804
JavaScript #19
랜덤으로 명언, 배경을 추가했다.
to do list를 추가해보자
먼저 html내 form으로 입력창을 만든다.
-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">
<link rel="stylesheet" href="css/style.css">
<title>MOO App</title>
</head>
<body>
<form class="hidden" id="login-form">
<input
required maxlength="15"
type="text"
placeholder="What is your name?"/>
<button>Log In</button>
</form>
<h2 id="clock">00:00:00</h2>
<h1 id="greeting" class="hidden"></h1>
<form id="todo-form">
<input type="text" placeholder="Write a To Do and Press Enter" />
</form>
<ul id="todo-list"></ul>
<div id="quote">
<span></span>
<span></span>
</div>
<script src="js/greetings.js"></script>
<script src="js/clock.js"></script>
<script src="js/quotes.js"></script>
<script src="js/background.js"></script>
</body>
</html>-todo.js
생성
const toDoForm = document.getElementById("todo-form")
const toDoList = document.getElementById("todo-list")Id로 element를 가져온다
이전에 form의 기본 동작은 submit event였다.
기본 동작을 막아주자.
const toDoForm = document.getElementById("todo-form")
const toDoInput = toDoForm.querySelector("input")
const toDoList = document.getElementById("todo-list")
function handleToDoSubmit(event){
event.preventDefault()
console.log(toDoInput.value)
}
toDoForm.addEventListener("submit", handleToDoSubmit)toDoForm으로 document내 todo-form이라는 id를 가진 element를 가져온다. 그리고 사용자가 입력한 값을 받기 위해서 toDoForm내 input을 가져와서 출력해서 테스트 해보았다.
공부중인 것들 기록