Не так работает кнопка Js

Question

У меня есть to-do-list на Js. Есть не сколько кнопок "Все" он показывает все задачи (который уже выполнены и не выполнены), кнопка "Не выполнены" показывает только не выполнены и кнопка "Выполнены" вот с ней и проблема. Я сделал 2 задачи, одну пометил (она стала выполнена) нажал на кнопку "Не выполнены" и мне показались задачи которые не выполнены и после этого я нажал на кнопку "Выполнены" но вместо того чтобы показать только выполнены , мне показались и не выполнены. А мне надо чтобы показались только выполнены. Кто знает решение проблемы?

const input = document.getElementById('input')
const create = document.getElementById('create')
const vsego = document.getElementById('vsego')
const all = document.getElementById('all')
const checked = document.getElementById('checked')
const no_checked = document.getElementById('no_checked')

let counter = 0
//Создать задачу

create.addEventListener('click', function() {
  let div = document.createElement('div')
  div.classList.add('todoone')
  document.getElementById('ul').append(div)

  let li = document.createElement('li')
  li.textContent = input.value
  li.classList.add('def')
  div.append(li)

  let deletebutton = document.createElement('button')
  deletebutton.setAttribute('role', 'button')
  deletebutton.textContent = 'Удалить'
  div.append(deletebutton)

  counter++
  vsego.textContent = `Всего задач: ${counter}`


  //Удалить задачу
  deletebutton.addEventListener('click', function() {
    if (li.classList.contains('on')) {
      counter++
    }
    counter--
    vsego.textContent = `Всего задач: ${counter}`
    this.closest('div').remove()

  })
  //выполнена?
  li.addEventListener('click', function() {
    li.classList.toggle('on')
    if (li.classList.contains('on')) {
      counter--
      vsego.textContent = `Всего задач: ${counter}`
    } else {
      counter++
      vsego.textContent = `Всего задач: ${counter}`
    }
  })

  //Все
  all.addEventListener('click', function() {
    div.classList.remove('li')
  })

  //не выполненые
  no_checked.addEventListener('click', function() {
    if (li.classList.contains('on')) {
      div.classList.add('li')
    } else {
      //
    }
  })
  //выполнены

  checked.addEventListener('click', function() {
    if (li.classList.contains('on')) {
      div.classList.remove('li')
    }


  })
})

.on {
  color: green;
}

.li {
  display: none;
}

<div class="container">
  <div class="todo_create">
    <input type="text" id="input" placeholder="Введите текст">
    <button id="create">Создать</button>
  </div>
  <div class="todos">
    <ul id="ul">

    </ul>
    <br>
    <h1 id="vsego">Всего задач: </h1>
    <br>
    <button id="all">Все</button>
    <button id="checked">Выполненные</button>
    <button id="no_checked">Не Выполненные</button>
  </div>
</div>

Answer 1

Немного с условиями было не точно:

  //выполнены
  checked.addEventListener('click', function() {
    div.classList.remove('li') // очистка, чтобы работать со всем списком 
    if (!li.classList.contains('on')) {
      div.classList.add('li')
    }
  })

Так же я добавил отображение списка на выполненном не выполненном - чтобы не приходилось между ними нажимать все. Разумеется и этот код можно оптимизировать.

const input = document.getElementById('input')
const create = document.getElementById('create')
const vsego = document.getElementById('vsego')
const all = document.getElementById('all')
const checked = document.getElementById('checked')
const no_checked = document.getElementById('no_checked')

let counter = 0
//Создать задачу

create.addEventListener('click', function() {
  let div = document.createElement('div')
  div.classList.add('todoone')
  document.getElementById('ul').append(div)

  let li = document.createElement('li')
  li.textContent = input.value
  li.classList.add('def')
  div.append(li)

  let deletebutton = document.createElement('button')
  deletebutton.setAttribute('role', 'button')
  deletebutton.textContent = 'Удалить'
  div.append(deletebutton)

  counter++
  vsego.textContent = `Всего задач: ${counter}`


  //Удалить задачу
  deletebutton.addEventListener('click', function() {
    if (li.classList.contains('on')) {
      counter++
    }
    counter--
    vsego.textContent = `Всего задач: ${counter}`
    this.closest('div').remove()

  })
  //выполнена?
  li.addEventListener('click', function() {
    li.classList.toggle('on')
    if (li.classList.contains('on')) {
      counter--
      vsego.textContent = `Всего задач: ${counter}`
    } else {
      counter++
      vsego.textContent = `Всего задач: ${counter}`
    }
  })

  //Все
  all.addEventListener('click', function() {
    div.classList.remove('li')
  })

  //не выполненые
  no_checked.addEventListener('click', function() {
    div.classList.remove('li')
    if (li.classList.contains('on')) {
      div.classList.add('li')
    } else {
      //
    }
  })
  //выполнены
  checked.addEventListener('click', function() {
    div.classList.remove('li')
    if (!li.classList.contains('on')) {
      div.classList.add('li')
    }
  })
})

.on {
  color: green;
}

.li {
  display: none;
}

<div class="container">
  <div class="todo_create">
    <input type="text" id="input" placeholder="Введите текст">
    <button id="create">Создать</button>
  </div>
  <div class="todos">
    <ul id="ul">

    </ul>
    <br>
    <h1 id="vsego">Всего задач: </h1>
    <br>
    <button id="all">Все</button>
    <button id="checked">Выполненные</button>
    <button id="no_checked">Не Выполненные</button>
  </div>
</div>

БЛОГ НА HUSL

Не так работает кнопка Js

Ответы (1 шт):