Just starting out with Css and javascript, I'm currently engaged in a simple project (similar to a weekly task manager). On my text/html page, I have a navbar, 7 dynamic <ul> elements with "Add task" and "Delete Task buttons", and each <li> element inside these lists can change its state to .active when clicked (to mark the task as done). The issue arises when I try to use JavaScript and a button to add a new <li>; it simply 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a7c5c8c8d3d4d3d5c6d7e79288958997">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mad/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/kI1Ox" crossorigin="anonymous" />
<link href="/css/style.css" rel="stylesheet">
<!------Scripts for Navbar Deployment-->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dbb9bcc0cdbfbdebfccdfadeAB84bcdadfd0dcfed3CDCDEEB42edfccda0fdfafa">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-Xe+8cLOoJaPtN/veChSPwrqv+lEajZBovgmPmFeFZWalmDVntaaPaJvnYZsggxdPhA" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="57354358555d444052630b14510b0b15">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-ODmDIVzU+FuSQxeeHeFiOiIvjRNapGYEyqaDcqOhhciBlLtqhTsoPsToQdlbRicUzyK" 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>