Step 2. 정적인 페이지를 어느 정도 동적으로 만들기
기본적인 틀을 어느 정도 잡았으니,
input 태그로부터 값을 받아 append로 달아보자.
그러기 위해서는 input 태그를 추가해야 한다.
index.html code>
1 2 3 4 5 6 7 8 9 10 11 12 13 | <body> <h1>To do List</h1> <p> <input type="text" id="inputText"/> <button id="btnAdd">New Item</button> </p> <ul id="todolist"> </ul> <script src="main.js"></script> </body> | cs |
그리고 이제 자바스크립트 코드를 보자.
listItem.innerText 값에 Hello 대신에,
input 태그로부터 들어온 값을 주면 될 것 같지 않은가?
일단 input 태그를 잡자.
var inputText = document.getElementById(‘inputText’);
그리고 input 태그로부터 들어온 값을 받는다.
이때는 .value를 사용한다.
listItem.innerText = inputText.value;
여기까지 한 상태에서, 실행을 해보자.
잘돌아가지만 공백일 경우 또는 스페이스바 한 번만 누른 경우에
보기 싫게 li 태그가 삽입 되는 것을 볼 수 있다.
그렇기 때문에 if 문을 통해서,
공백이거나 스페이스바만 입력됬을 때 false를 return 하여
태그가 추가되지 않도록 하자.
if(!itemText || itemText === "" || itemText === " ") return false;
main.js code>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | function addNewItem(list, itemText){ var listItem = document.createElement('li'); listItem.innerText = itemText; list.appendChild(listItem); } var btnNew = document.getElementById('btnAdd'); btnNew.onclick = function(){ var inputText = document.getElementById('inputText'); var itemText = inputText.value; if(!itemText || itemText === "" || itemText === " ") return false; // blank 방지 addNewItem(document.getElementById('todolist'), itemText); }; | cs |
- Step 2. The end -
Step 3. 동적인 부분에 대해서 사용자의 경험을 높이기. [이동]
'Dev.Project > Todolist_project' 카테고리의 다른 글
| [Todolist_Basic] Step 5. listItem 수정하고 삭제하기 (0) | 2016.07.10 |
|---|---|
| [Todolist_Basic] Step 4. 완료된 항목을 표시하기 (0) | 2016.07.10 |
| [Todolist_Basic] Step 3. 동적인 부분에 대해서 사용자 경험 높이기 (2) | 2016.07.10 |
| [Todolist_Basic] Step 1. 기본적인 HTML / CSS / Javascript 구조 갖추기. (1) | 2016.07.10 |
| TodoList 만들기 Project_Basic Intro (HTML / CSS / JavaScript) (0) | 2016.07.10 |
