More than 5 years have passed since last update.

JavaScriptだけでTODOリストを作ってみた2

JavaScript

Posted at 2019-12-05

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>todoリスト</title>
</head>
<body>
  <h1>TODO LIST</h1>
  <main>
    <form id="todo-form">
      <input type="text">
      <button id="btn" type='submit'>追加</button>
    </form>
    <!--ここにリストを形成!-->
    <ul id="todo-list"></ul>
  </main>
  <script>
(function(){
    'use strict';

    var todoForm = document.getElementById('todo-form');
    var todoList = document.getElementById('todo-list');
    var todoInput = document.querySelector('#todo-form input'); 

    var addItem = function(event){
         event.preventDefault(); 

        if(!todoInput.value){
            return;
        }

        var checkBox = document.createElement('input');
            checkBox.type = 'checkbox';

        var span = document.createElement('span');
            span.textContent = todoInput.value; 

        var label = document.createElement('label');
            label.appendChild(checkBox);
            label.appendChild(span);

        var del = function(e){
            var del_parent = e.target.parentElement; 
            todoList.removeChild(del_parent);
            };

        var delbtn = document.createElement('button');
            delbtn.textContent = "削除";
            delbtn.addEventListener('click',del);

        var list = document.createElement('li');
            list.appendChild(label);
            list.appendChild(delbtn);  

        todoList.appendChild(list);

        todoInput.value ='';
    };

    todoForm.addEventListener('submit',addItem);

})();
  </script>

</body>
</html>

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up