이재호
간단한 폼 리스트 만들기 본문
하루지나면 까먹는 성격에 다시한번 복습겸 블로그에 배운내용을 작성해봅니다
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event Basics</title>
</head>
<body>
<h1> 체크리스트 </h1>
<form action="/dogs" id="letter">
<input type="text" name="todo" placeholder="fisrtName">
<button>클릭!</button>
</form>
<h2> 리스트 : </h2>
<ul id = "talklist"></ul>
<script src="app.js"></script>
</body>
</html>app.js
const form = document.querySelector('form')
const ul = document.querySelector('ul')
form.addEventListener('submit', ()=>{
const todoInput = form.elements.todo
addList(todoInput.value)
todoInput = '';
})
// 리스트 추가 함수
const addList(todo) =>{
const NewList = document.createElement('li')
const boldtxt = document.createElement('b')
boldtxt.append('todo')
NewList.append('NewList')
ul.append('NewList')
}
'프론트엔드 > 자바스크립트' 카테고리의 다른 글
| XMLHttpRequest(XHR) VS Fetch VS Axios (0) | 2023.02.17 |
|---|---|
| 간단한 스코어 게임 만들기 (0) | 2023.02.15 |
| 랜덤색깔 버튼 만들기 (0) | 2023.02.13 |
| Dom을 이용해서 포켓몬 도감 만들기 (0) | 2023.02.13 |
| 브라우저에서 버튼 100개 만들어보기 ☑️ (0) | 2023.02.13 |
'프론트엔드/자바스크립트' Related Articles
more
