// console.log(template);

​

// console.log('aaa');

​

//ToDoのタイトル

var title = document.getElementById('todo-title');

// console.log(title);

​

//ToDoすべて表示

document.getElementById("all").addEventListener('change', function() {

  var all_completed = document.getElementsByClassName("completed");

  var all_active = document.getElementsByClassName("active");

  // console.log(completed);

​

  [].forEach.call(all_completed, function(elem) {

    elem.parentNode.classList.remove('none');

  });

​

  [].forEach.call(all_active, function(elem) {

    elem.parentNode.classList.remove('none');

  });

​

  console.log("all");

});

​

//ToDoのactiveのみ表示

document.getElementById("active").addEventListener('change', function() {

  var completed = document.getElementsByClassName("completed");

  var active = document.getElementsByClassName("active");

  // console.log(active);

​

  [].forEach.call(completed, function(elem) {

    elem.parentNode.classList.add('none');

  });

​

  [].forEach.call(active, function(elem) {

    elem.parentNode.classList.remove('none');

  });

​

  // console.log("active");

});

​

​

//ToDoのcompletedのみ表示

document.getElementById("completed").addEventListener('change', function() {

  var completed = document.getElementsByClassName("completed");

  var active = document.getElementsByClassName("active");

  console.log(completed);

​

  [].forEach.call(completed, function(elem) {

    elem.parentNode.classList.remove('none');

  });

​

  [].forEach.call(active, function(elem) {

    elem.parentNode.classList.add('none');

  });

​

  // console.log("completed");

});

​

​

​

​

//ToDoを追加

document.getElementById("button").addEventListener('click', function() {

  console.log('aaaa')

  //タイトル未記入時はアラート

  if (!title.value) {

    alert("ToDoが未記入です");

    return;

  }

​

  // templete 要素の content 属性の有無を確認することで、

  // ブラウザーが HTML template 要素に対応しているかテストします。

  if ('content' in document.createElement('template')) {

​

    var todoul = document.querySelector("#todo-list");

    var clone = document.importNode(template.content, true);

    var span = clone.querySelectorAll("span");

​

    span[0].textContent = title.value;

​

    // ボタンが押されたらリストから削除

    clone.querySelector('button').addEventListener('click', function() {

      var parent = this.parentNode;

      parent.parentNode.removeChild(parent);

      console.log(parent);

    });

​

    // チェックマークが入ったら取り消し線を切り替え

    clone.querySelector('input').addEventListener('change', function() {

      var done = this.nextElementSibling;

​

      if (done.className == 'completed') {

        // done.removeAttribute('class');

        done.setAttribute('class', 'active');

      } else {

        done.setAttribute('class', 'completed');

​

      }

      // console.log(done);

    });

​

    //ToDoを追加

    todoul.appendChild(clone);

​

    // titleの値を空に

    title.value = '';

​

  } else {

    // HTML template 要素に対応していないので

    // 表に行を追加するほかの方法を探します。

  }

});

​