ToDo2

by techyankee

HTML

<div class="container">
  <div class="row justify-content-center">
    <div class="col-md-9">
      <h1>ToDo</h1>
      <div class="todo-app">
        <input id="todo-title2" class="todo-input2" type="text" name="" value="">
        <button id="button2" type="button" name="button">追加</button>

        <ul id="todo-list">

        </ul>


        <div>
          <input type="radio" id="all2" name="todo" value="all" checked>
          <label for="all">all</label>
        </div>

        <div>
          <input type="radio" id="active2" name="todo" value="active">
          <label for="active">active</label>
        </div>

        <div>
          <input type="radio" id="completed2" name="todo" value="completed">
          <label for="completed">completed</label>
        </div>

      </div>
    </div>
  </div>
</div>

CSS

ul {
    list-style: none;
  }

  .template-none {
    display: none;
  }

  .completed {
    text-decoration: line-through;
  }

  .none {
    display: none;
  }

JavaScript

// console.log('aaaa');

var todos = [
  // {title: 'やること1', status: 'active', display: 'on' },
  // {title: 'やること2', status: 'completed', display: 'none' },
  // {title: 'やること3', status: 'active', display: 'none' },
  // {title: 'やること4', status: 'active', display: 'on' }
];


var completed = []
var active = []

var index = function(todos) {
  // console.log('index');
  var todoList = '';
  for (var i = 0; i < todos.length; i++) {
    todoList += '<li class="' + todos[i]['display'] + '"><input class="comp2" type="checkbox" name="" value=""><span class="' + todos[i]['status'] + '">' + todos[i]['title'] + '</span><button class="delete2" type="button" name="button">削除</button></li>'; // = ではなく += を使う
  }
  document.getElementById('todo-list').innerHTML = todoList;

  // ToDoを削除する
  var btnEl = document.querySelectorAll('.delete2');
  for (var i = 0; i < btnEl.length; i++) {

    (function(j) {
      btnEl[j].addEventListener('click', function() {
        // console.log(j);
        // delete todos[j];
        todos.splice(j, 1);
        // console.log(todos);
        index(todos);
      });
    })(i);
  }

  // ToDoのstatusを切り替える
  var checkEl = document.querySelectorAll('.comp2');
  for (var k = 0; k < checkEl.length; k++) {
    (function(l) {
      checkEl[l].addEventListener('change', function() {
        // console.log(l);

        if (todos[l]['status'] == 'active') {
          todos[l]['status'] = 'completed';
        } else {
          todos[l]['status'] = 'active';
        }

        index(todos);
      });
    })(k);
  }

  // index(todos);
}


//ToDoのタイトル
var title = document.getElementById('todo-title2');

//ToDoを追加する
document.getElementById("button2").addEventListener('click', function() {
  //タイトル未記入時はアラート
  if (!title.value) {
    alert("ToDoが未記入です");
    return;
  }

  todos.push({
    title: title.value,
    status: 'active'
  });

  // すべてdisplayをonに
  for (var i = 0; i < todos.length; i++) {
    if (todos[i].display == "none") {
     ...