HTML과 javascript를 이용해서 TO DO LIST를 만들어보려고 한다.
먼저 검색창과 확인 버튼을 만들어보는 과정을 보도록 하자.
<form method = "get" action = "./index4.html" id = "todoform">
<input type="text" name = "todoInput" id = "todoInput">
<input type="submit" id = "todoSubmit" value = "확인">
</form><form> 과 <input>을 이용해서 만들 수 있다. 각 코드에 id를 부여해서 불러오기 쉽게 만든다.
그러면 아래와 같이 화면에 뜨는 것을 볼 수 있다.
그 다음 이제 HTML을 자바스크립과 연결하는 과정을 만들어야 한다. <head> 부분에 자바스크립을 연결해주고 외부연결도 같이 해준다.
<script type="text/javascript" src = "./index3.js"></script>
자 그럼 이제 TO DO LIST를 만들 준비는 다 갖쳐줬다. 외부연결을 통해서 index3.js로 가서 코드를 완성시켜보자.
먼저 자바스크립에서 HTML을 불러오는 작업을 해보도록 하자
window.addEventListener("DOMContentLoaded", jc)
function jc(){
const submitElement = document.querySelector("#todoSubmit")
const formElement = document.querySelector("#todoform")
formElement.addEventListener("submit", submitHandler)
변수를 지정해서 HTML에 있는 <form> 코드에 특정 id를 가져와서 연결시켜준다.
unction submitHandler(e){
e.preventDefault()//submit 막기
const inputElement = document.querySelector('#todoInput')
const ulElement = document.querySelector("#todoList")
// console.log(inputElement.value) // input에 있는 내용을 바로 나타나게 해주는 것
const liElement = document.createElement('li')
const spanElement = document.createElement('span')
const span2Element = document.createElement('span')
spanElement.innerHTML = inputElement.value
span2Element.innerHTML = 'X'
span2Element.addEventListener('click',removeHandler)
liElement.append(spanElement)
liElement.append(span2Element)
ulElement.append(liElement)
inputElement.value = ''변수를 지정해서 각 변수에 해당하는 id를 HTML에서 가져와 querySelector( ) 안에 넣어준다.
const liElement = document.createElement('li')
const spanElement = document.createElement('span')
const span2Element = document.createElement('span')위에 같은 경우는 <li>와 <span>에 맞는 내용을 넣어주기 위해서 사용한다.
spanElement.innerHTML = inputElement.value
span2Element.innerHTML = 'X'
inputElement.value = '' // 값을 완성하고 작성한 텍스트는 자동으로 사라지게 만들어준다.<span>이 총 2개를 만들었으므로 각 <span>에 해당하는 값들을 넣어주기 위해 이렇게 한다. inputElement 같은 경우는input 박스 안에 들어가는 내용의 값을 나타낸 것을 말한다.
innerHTML : <li><il> 안에 있는 전체의 내용을 표시해준다. 사용하고싶은 엘리먼트(div,li) 안에다가 text(문자열)를 넣고 싶을 떄 사용한다.
append() : 엘리먼트 안에 있는 method이다. 해당 태그 안에다가 엘리먼트를 넣고싶을 때 사용하는 것이다.
이렇게 다 마무리하면 결과창이 아래처럼 뜬다.
네모칸 안에 문장을 넣으면 바로 밑으로 뜨면서 문장뒤엔 X가 붙는다 ( span2Element.innerHTML = 'X')
그렇다면 여기서 우리가 저 X표시를 눌러서 누룬 문장을 지우고 싶다고 해보자.
어떤식으로 해결해야할까?
일단 먼저 removeHandler라는 함수를 정의해보자. 매개변수에는 'event' or 'e' 값을 넣어서 이벤트를 넣어준다.
값을 지우는 이벤트를 하기 위해서는 e.target을 이용해보도록 하자
Event 인터페이스의 target 속성은 이벤트가 발생한 대상 객체를 가리킵니다.
function removeHandler(e){
console.log(e.target.parentNode)
e.target.parentNode.remove()
}우리가 여기서 중요시 봐야할 것이 바로 e.target이다. e.target의 의미는 클릭된 친구를 보여주는 효과이고
e.target.parentNode 같은 경우는 클릭된 친구의 부모 태그를 나타나게 해주는 효과이다.
위에 나온 것처럼 e.target.parentNode.remove()는 위에 함수에 있는span2Element.addEventListener('click',removeHandler)랑 확인해보도록 하자.
span2는 아까 정해줬다 싶이 'X' 로 나타난다. 여기서 우리가 'X'를 마우스로 클릭을 했을 때 removeHandler 함수에 맞게 적용된다고 보면 된다.
다시 removeHandler의 함수를 보면 e.target.parentNode가 있는걸 볼 수 있다. 이처럼 클릭한 e.target의 부모태그를 불러 오는 것이기 때문에 span2Element의 부모태그인 <li> 태그가 사라지는 것을 볼 수 있다. 이로써 모든 과정이 마무리 된 것을 볼 수 있을 것이다.
'Javascript' 카테고리의 다른 글
| [JS] Eslint, Prettier 설치 적용하는 법 (0) | 2022.06.09 |
|---|---|
| javascript 10일차 querySelectorAll( ), setInterval( ), setTimeout( ) (0) | 2022.01.12 |
| Javascript 8일차 DOM, BOM, addEventListener, callback, onload (0) | 2022.01.10 |
| Javascript 7일차 (0) | 2022.01.07 |
| Javascript 6일차 (0) | 2022.01.07 |