티스토리 뷰


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. 동적인 부분에 대해서 사용자의 경험을 높이기. [이동]



«   2021/08   »
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31        
Total
1,459,004
Today
199
Yesterday
416