Coding Feature.

JS) 리스트에 입력한 값 추가하는 웹 본문

Programming Language/JavaScript

JS) 리스트에 입력한 값 추가하는 웹

codingfeature 2023. 1. 11. 01:07

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"></meta>
        <title>Todo List</title>
        <link href="style.css" rel="stylesheet" type="text/css"></link>
    </head>

    <body>
       
        <h1 class="main-title">To Do List!</h1>
        <div class="list-area">
            <ul id="list">
            </ul>
        </div>
        <div class="type-area">
            <p><input type="text" id="todo"></p>
            <p><input type="button" value="추가" id="submit"></p>
            <p><input type="button" value="삭제" id="delete"></p>
        </div>
        <script src="./script.js"></script>
    </body>
</html>
 
 
script.js
var list = document.getElementById('list');
var submit = document.getElementById('submit');
var del = document.getElementById('delete');
var input = document.getElementById('todo');

submit.addEventListener('click', clicksubmit);
del.addEventListener('click', clickdelete);

var cnt = 1;

function clicksubmit(){
    var temp = document.createElement('li');
    temp.setAttribute("id", "li"+cnt);
    temp.innerHTML = input.value;
    list.appendChild(temp);
    cnt++;
}

function clickdelete(cnt) {
    var li = document.getElementById('li'+cnt);
    list.removeChild(li);
  }

 

style.css

.main-title{
    text-align: center;
    color:white;
    box-sizing: border-box;
    width: 100%;
    padding: 10px;
    background-color: black;
}
.list-area{
    text-align: center;
    font-size: 200%;
}
.type-area{
    text-align: center;
}
ul{
    list-style: none;
}
li{
    padding:5px;
}

 

리스트에 새로운 값을 추가하는 것까지 구현하였으나,

clickdelete()함수를 통해 노드 삭제는 아직 애를 먹고 있다.

함수 내 cnt 값 확인을 위해 디버깅을 했는데,

cnt를 제대로 받지 못한 것 같다.

좀더 연구해봐야겠다.

'Programming Language > JavaScript' 카테고리의 다른 글

JS) 코딩하다가 알게 된 사실. (다른 javascript 파일의 함수 사용)  (0) 2023.01.13
JS) 영화 평점 시스템 #2 grid, js 파일 여러 개 사용  (0) 2023.01.12
JS) 영화 평점 시스템 (select, option의 활용)  (0) 2023.01.12
JS) 바닐라 자바스크립트로 CRUD 구현. 맨 땅에 헤딩하기.  (0) 2023.01.11
JS) Creating a site that counts +1 or -1.  (0) 2023.01.09
'Programming Language/JavaScript' Related Articles more