[Todolist_Basic] Step 2. 정적인 페이지를 어느 정도 동적으로 만들기

_Jbee 2016. 7. 10. 11:30

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>
Colored by Color Scripter
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);
}; 
Colored by Color Scripter
cs

~~제법 그럴듯 해 보인다!~~

- Step 2. The end -

Step 3. 동적인 부분에 대해서 사용자의 경험을 높이기. [이동]

저작자표시 비영리 변경금지 (새창열림)