3.22 - To do list

Javascript

    <script type="text/javascript">

    function btnEvent(){
        card_text= document.querySelector('#card_input');
        console.log(card_text.value);
        cardList = document.querySelector('.list');
        liElement = document.createElement('li');
        liElement.innerHTML = card_text.value;
        cardList.appendChild(liElement);
    }
    
    </script>

 

 card_text = document.querySelector('#card_input');

>> 에서 card_text는 object, card_text라는 element안에 위에 input 태그 한줄을 넣었다.

>> 새로운 정의를 내린다

>> method

 

 console.log(card_text.value);

>> console에 #card_input (card_text)의 value값을 가져와라 >> 그걸 console에서 확인하겠다

 

liElement = document.createElement('li');

>>여기서 liElement는 내가 임의로 지정하는 이름

>> 새로운 li element를 만들어라.

 

liElement.innerHTML = card_text.value;

>> 새로만든 li 안에 #card_input(card_text)의 value값을 넣어라

 

----------------여기까지는 화면에 출력이 안됨 콘솔에서만 확인가능

 

cardList.appendChild(liElement);

>> cardList (ul class="list") 아래에 liElement (card_text의 value값으로 새로만들어지는 li)를 넣어라.

 

그럼 이런식으로 옆에 버튼을 누르면 card_input에 적힌 글자가 list-down됨