I'm new to Css and javascript and currently working on a simple project (kinda like a weekly task manager). I created text/html page which contains navbar, 7 dynamic <ul> with "Add task" and "Delete Task buttons", and each <li> inside of those lists can change it's state to .active on click (when task is done). However, if i put li manually it works fine, but if I use javascript and button to add new <li> it's just won't become active.

function addTask() {
  var ul = document.getElementById("mondayList")
  var li = document.createElement("li")
  li.className = 'todo'
  li.appendChild(document.createTextNode("TaskName"));
  ul.appendChild(li);
}
const todos = document.querySelectorAll(".todo");
const togglers = document.querySelectorAll(".toggler");


todos.forEach((todo) => {
  todo.addEventListener("click", () => {
    todo.classList.toggle('active');
  })
})

togglers.forEach((toggler) => {
  toggler.addEventListener("click", () => {
    toggler.classList.toggle('active');
    toggler.nextElementSibling.classList.toggle('active');
  })
})

.todos {
  font-family: "Segoe UI fw-semibold", Tahoma, serif;
  font-size: 1.5rem;
  padding: 5rem;
}

ul {
  list-style-type: none;
}

.todos {
  cursor: pointer;
}

.todo::before {
  content: "\2610";
  display: inline-block;
  margin-right: 0.5rem;
}

.todo.active::before {
  content: "\2611";
}

.todo.active {
  text-decoration: line-through;
  color: #888;
}

.toggler::before {
  content: "\25B6";
  display: inline-block;
  margin-right: 0.5rem;
  transition: transform 0.3s ease-in-out;
}

.toggler.active::before {
  transform: rotate(90deg);
}

.toggler-target {
  display: none;
}

.toggler-target.active {
  display: inline-block;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous" />
<link href="/css/style.css" rel="stylesheet">
<!------Скрипты для развертывания навбара-->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-Xe 8cL9oJa6tN/veChSP7q mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ODmDIVzN pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK" crossorigin="anonymous"></script>

<nav >
  <div >
    <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span ></span>
        </button>
    <div  id="navbarNav">
      <ul >
        <li >
          <a  aria-current="page" href="/home">Home</a>
        </li>
        <li >
          <a  href="/test">InobitecTest </a>
        </li>
      </ul>
    </div>
  </div>
</nav>
<div >
  <button >[ ]Unfold[ ]</button>
</div>
<div style="margin: auto">
  <ul  id="todos" style="display: inline-block;margin-left: 786px;padding-top: 0px">
    <li>
      <div >Monday</div>
      <ul  id="mondayList">
        <li>
          <a  onclick="addTask()">Add Task</a>
          <a >DeleteTask</a>
        </li>
        <li >Task1</li>
      </ul>
    </li>
    <li>
      <div  id="tuesdayList">Tuesday</div>
      <ul >
        <li>
          <a >Add Task</a>
          <a >DeleteTask</a>
        </li>
      </ul>
    </li>
    <li>
      <div  id="wednesdayList">Wednesday</div>
      <ul >
        <li>
          <a >Add Task</a>
          <a >DeleteTask</a>
        </li>
      </ul>
    </li>
    <li>
      <div >Thursday</div>
      <ul  id="thurstdayList">
        <li>
          <a >Add Task</a>
          <a >DeleteTask</a>
        </li>
      </ul>
    </li>
    <li>
      <div  id="fridayList">Friday</div>
      <ul >
        <li>
          <a >Add Task</a>
          <a >DeleteTask</a>
        </li>
      </ul>
    </li>
    <li>
      <div >Saturday</div>
      <ul  id="saturdayList">
        <li>
          <a >Add Task</a>
          <a >DeleteTask</a>
        </li>
      </ul>
    </li>
    <li>
      <div >Sunday</div>
      <ul  id="sundayList">
        <li>
          <a >Add Task</a>
          <a >DeleteTask</a>
        </li>
      </ul>
    </li>
  </ul>
  <script src="/js/script.js" defer charset="UTF-8"></script>
</div>

CodePudding user response：

You need to delegate

this code replaces all other code than function addTask() {

document.getElmentById("todos").addEventListener("click",function(e) {
  const tgt = e.target;
  if (tgt.matches(".todo")) tgt.classList.toggle('active');
  else if (tgt.matches(".toggler")) {
     tgt.classList.toggle('active');
     tgt.nextElementSibling.classList.toggle('active');
  }
})