Css element does not become active

August 5, 2022

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/bootstrap@5.2.0/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/core@2.11.5/dist/umd/popper.min.js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.min.js" integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK" crossorigin="anonymous"></script>

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

>Solution :

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');
  }
})