【html,css,javascript】todoリストの作成_3(2020/2/5) - 平凡エンジニアによる平凡ブログ

todoリストの続きになります。今日は削除ボタンだけでなく、todoが完了しているかどうか判断するためにチェックボックスも追加するようにします。

<!DOCTYPE html>
  <html lang="ja">
    <head>
      <meta charset="utf-8">
      <title>Mytodolist</title>
      <link rel="stylesheet" href="todolist.css">
      <link rel="stylesheet" href="reset.css">  
    </head>
  <body>
      
    <div class="side-bar">
      <div class="side-bar_header"></div>
      <div class="side-bar_menu"></div>
    </div>

    <div class="main-form">
      <h1>Todo-list</h1>
      <form id="todo-form">
        <input type="text" id="todo-input">
        <button id="send-button">作成</button>
      </form>
      <ul id="todo-list">作業タスク</ul>
      <script src="todolist.js"></script>
    </div>

  </body>
</html>

(function(){
  'use strict';
  
  var todoForm = document.getElementById("todo-form")
  var todoInput = document.getElementById("todo-input")
  var todoList = document.getElementById("todo-list")

  var addTodo = function(e){
    e.preventDefault();
    if(todoInput.value == ""){
        return;
    }
　
　/* チェックボックスの追加 */
    var checkBox = document.createElement("input")
    checkBox.type = "checkbox";


      var todoBox = document.createElement("div");
      var todoTask = document.createElement("li");
      todoBox.className = "task";
      todoTask.textContent = todoInput.value;

      todoList.appendChild(todoBox)
      todoBox.appendChild(todoTask)
      todoBox.appendChild(checkBox)
    
      /* 削除ボタンの追加,削除機能の追加 */
      var deletebutton = document.createElement("button")
      deletebutton.textContent = "削除"
      todoBox.appendChild(deletebutton)


      var deleteList = function(e){
      todoList.removeChild(event.target.parentElement);
      }

      deletebutton.addEventListener("click",deleteList);
      todoInput.value="";
    };
    todoForm.addEventListener("submit", addTodo);
      
  }());

今回のポイント
・まずcreateElementでinputタブを追加
・inputタブに属性をつけるため、オブチェクト.type = checkboxとする
ことでを追加する
・あとは削除ボタンと同じようにappendChildで該当場所に追加する。