이재호

간단한 폼 리스트 만들기 본문

프론트엔드/자바스크립트

간단한 폼 리스트 만들기

호재이 2023. 2. 14. 14:00

하루지나면 까먹는 성격에 다시한번 복습겸 블로그에 배운내용을 작성해봅니다

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