티스토리 뷰

Javascript

간단한 Todo 구현하기

lluna 2021. 11. 8. 00:51

 

포인트

  • form 을 submit 하면 addTodo 함수가 실행되는 구조로 구현한다.
  • 입력한 내용은 input.value 로 찾는다. (submit event에서 찾을 수 없음. 이것 때문에 헤맸다!)
  • 새로운 리스트를 생성하고, 값을 넣고, 적절한 위치에 추가한다.
  • 기본 이벤트를 막는다.
  • 부가 1 - 빈 값을 입력하면 경고창이 뜬다.
  • 부가 2 - 입력 후 인풋 창을 리셋한다.

 

<body>
  <form action="#">
    <input type="text">
    <button>Add</button>
  </form>
  <ul>
    
  </ul>

  <script>
    const userForm = document.querySelector('form')
    
    function addTodo (event) {
      // 기본 이벤트막기
      event.preventDefault()

      const userInput = document.querySelector('input')

      // submit 이 아닌 input에서 데이터값을 찾아 변수에 입력
      const content = userInput.value

      // 빈 값 막기 - 문자열 양쪽의 공백 제거 trim 메서드
      if (content.trim()) {
        // 리스트 생성하고 넣기
        const liTag = document.createElement('li')
        liTag.innerText = content
        
        // 리스트 추가
        const ulTag = document.querySelector('ul')
        ulTag.appendChild(liTag)

      } else {
        alert('할 일을 입력하세요!')
      }

      // 입력 후 리셋
      event.target.reset()
    }

    userForm.addEventListener('submit', addTodo)

  </script>
</body>
저작자표시 비영리 변경금지

'Javascript' 카테고리의 다른 글

Axios  (0) 2021.11.10
AJAX  (0) 2021.11.08
event.preventDefault()  (0) 2021.11.07
DOM - Collection (Live vs. Static)  (0) 2021.11.07
for loop vs. forEach()  (0) 2021.11.07
댓글