Как сделать выполненую задачу Js

Question

У меня есть To-do-list который умеет создавать и удалять такси. Мне осталось сделать, выполнение. То есть, нажимаешь на таск и он окрашивается в зеленый цвет, если опять нажать на этот таск, то он становится дефолтным (грубо говоря черным) Не могу понять как сбросить стили.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>to-do-list js</title>
  <style>
    .on {
      color: green;
    }
    
    .btnd {
      width: 80px;
      height: 50px;
      border-radius: 25px;
      margin-left: 50px;
    }
  </style>
</head>

<body>
  <input type="text" name="" id="input">
  <button id="button">Добавить</button>
  <ul id="ul">
    <li>таск</li>
  </ul>
  <script>
    //иницилизаия кнопки и инпута
    let input = document.getElementById('input')
    let button = document.getElementById('button')

    //кнопка создать таск с кнопкой удалить
    button.addEventListener('click', () => {
      let li = document.createElement("li")
      li.textContent = input.value
      li.className = 'checked'
      document.getElementById("ul").appendChild(li);

      //удалить таск
      let btn = document.createElement('button')
      btn.setAttribute('role', 'button')
      btn.innerText = 'Удалить'
      btn.className = 'btnd'
      li.append(btn)
      btn.addEventListener('click', function() {
        this.closest('li').remove()
      })
      //выполнена таск
      li.addEventListener('click', function() {
        li.className = 'on'

      })


    })
  </script>
</body>

</html>

Answer 1

Используйте вместо присваивания className

li.className = 'checked';

добавление класса в класс-лист, т.к. классов у одного элемента может быть несколько. Чтобы добавить класс:

li.classList.add('checked');

Чтобы убрать класс:

li.classList.remove('checked');

Или, как вариант, можно использовать метод toggle:

li.classList.toggle('checked');

Подробнее об Element.classList можно узнать в топике на MDN.

Answer 2

classList.toggle() гораздо удобнее для решения этой задачи, он добавляет класс если его нет и удаляет если он есть

БЛОГ НА HUSL

Как сделать выполненую задачу Js

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