어제 to do list 를 만들고 글자를 입력하는것까지 자바스크립트를 만들어봤다.
오전 시간에는 어제 만든걸 가지고 스크립트를 보지 않고 외워서 치는 연습을 했다.
그 이후 각각의 리스트를 삭제할 수 있는 것까지 작동시켜봤다.
우선 addcard라는 새로운 함수를 만들어서 그 안에 변수를 지정해 준다.
해당 함수 부분의 코드를 한줄씩 분석해보겠다.
function addcard(){
<!-- addcard 함수를 다음과 같이 만들겠습니다.>
card_text = document.querySector('#card_input');
<!-- card_text 변수에 본문에서 가져온 #card_input 속성을 지정합니다. >
(해당 속성은 리스트 내용을 입력하는 입력박스)
samplelist = document.querySector('.samplelist');
<!-- samplelist 변수에 본문에서 가져온 .samplelist 속성을 지정합니다. >
(해당 속성은 ul엘리먼트 )
liEliment = document.createEliment('li');
<!-- liEliment 변수를 , 본문에서 가져온 <li>엘리먼트를 생성하도록 하는 변수로 지정합니다.>
liEliment.innerHTML = card_text.value;
<!-- liEliment안에 html 내용을 card_text의 value값으로 저장합니다.>
delBtn = document.createElement('button');
<!-- delbtn 변수를, 본문에서 가져온 <button>엘리먼트를 생성하도록 하는 변수로 지정합니다.>
delBtn.innerHTML = 'X';
<!-- delBtn 변수 안에 html내용을 'X'로 지정합니다.>
delBtn.onclick = function(){
<!-- delBtn 을 클릭했을 때 다음과 같은 함수를 실행 시키겠습니다.>
samplelist.removeChild(this.parentNode);
<!-- samplelist.removeChild() : samplelist변수 (즉 위에서 설정한 ul) 의 자녀 엘리먼트를 제거해라.
()안은 해당 자녀 엘리먼트를 지정합니다.
(this.parentNode); : this의 부모 엘리먼트를 지정합니다. 여기서 this는 delBtn을 뜻합니다.
즉, samplelist.removeChild(this.parentNode)
: samplelist의 자녀 엘리먼트를 제거하는데, 그것을 delBtn의 부모 엘리먼트로 지정합니다.
}
liEliment.appendChild(delBtn);
<!-- liEliment 변수에 delBtn을 자녀 엘리먼트로 지정합니다.(li안에 button을 넣습니다.) 이 코드를 넣음으로써
위 함수에서 "samplelist의 자녀 엘리먼트"와 "delBtn의 부모 엘리먼트"가 <li>엘리먼트로 일치하게 됩니다.>
samplelist.appendChild(liEliment)
<!-- samplelist 변수에 liEliment를 자녀 엘리먼트로 지정합니다.(ul안에 li를 넣습니다.)>
}