최근 JavaScript 강의를 듣고 새롭게 디자인해서 simple todo-list를 만들고 있는데
처음부터 막힐 뻔해서 당황했지만.. 다행스럽게도 생각이 나서 잠깐이나마 막혔던 부분을 적어놓으려 한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
<script defer src="app.js"></script>
</head>
<body>
<div id="container">
<div>
<form id="todo-form">
<input type="text" id="todo-input" placeholder="You must write task!">
<button id="todo-button">ADD</button>
</form>
</div>
<div class="todo-ul">
</div>
</div>
</body>
</html>
JAVASCRIPT
'use strict';
const container = document.getElementById('container');
const todoForm = document.getElementById('todo-form');
const todoInput = document.getElementById('todo-input');
const todoButton = document.getElementById('todo-button');
const todoUL = document.querySelector('.todo-ul');
function handleBtnClick(event) {
//form 새로고침 막기
event.preventDefault();
//입력값 담는 바구니
const newTodo = todoInput.value;
//todoInput의 값을 newTodo에 담아놓고
//화면에 어떻게 띄우지? -> 해결책 : todoForm.addEventListener("submit", handleBtnClick)으로 떴다.
//create li
const li = document.createElement('li');
todoUL.appendChild(li);
//create span
const span = document.createElement('span');
span.innerText=newTodo;
li.appendChild(span);
const xBtn = document.createElement('button');
xBtn.innerText="❌";
li.appendChild(xBtn);
}
todoForm.addEventListener("submit", handleBtnClick);
배운 점 :
글자로 최대한 풀어보려고 노력했다. '단순하게 단순하게..'를 속으로 생각하면서 뭐가 있을까 고민...
아마 이것도 나중에 보면 어딘가에 실수가 보이겠지..
1. function만 딸랑 나오면 안된다!
한번 더 구체적으로 선언하는 것이 필요하다. addEventListener도 나온다는 것을 잊지말자.
정확하게 JAVASCRIPT에 명령을 내려줘야 한다!!
2. span처럼 innerText에 뭔가를 넣을경우 appendChild를 맨 뒤로 옮겨줘야 함을 잊지말자!
'Javascript > 오답노트' 카테고리의 다른 글
| [jQuery] box를 toggle 할 때 왜 getElementById는 안될까? (0) | 2023.12.11 |
|---|---|
| [foreach 함수] 기초 문제 1 (0) | 2023.12.10 |