Llamé a la función dentro de los backticks al hacer clic en la entrada y lis y en el icono de fontawesome no está llamando a la función, pero el onclick funciona como se muestra en la consola. y aquí está el código.

 let editId; let isEditTask = false; let todos = JSON.parse(localStorage.getItem('todo-list')); function showTodo(filter) { let liTag = ''; if (todos) { todos.forEach((todo, id) => { const completed = todo.status === 'completed' ? 'checked' : ''; if (filter === todo.status || filter === 'all') { liTag += `<li class="task"> <label for="${id}"> <input onclick="updateStatus(this)" type="checkbox" id="${id}" ${completed}> <p class="${completed}">${todo.name}</p> </label> <div class="settings"> <i onclick="showMenu(this)" class="uil uil-ellipsis-v"></i> <ul class="task-menu"> <li onclick='editTask(${id}, "${todo.name}")'><i class="uil uil-pen"></i>Edit</li> <li onclick='deleteTask(${id}, "${filter}")'><i class="uil uil-trash"></i>Delete</li> </ul> </div> </li>`; } }); } taskBox.innerHTML = liTag || '<span>You don\'t have any task here</span>'; const checkTask = taskBox.querySelectorAll('.task'); !checkTask.length ? clearAll.classList.remove('active') : clearAll.classList.add('active'); taskBox.offsetHeight >= 300 ? taskBox.classList.add('overflow') : taskBox.classList.remove('overflow'); } showTodo('all'); filters.forEach((btn) => { btn.addEventListener('click', () => { document.querySelector('span.active').classList.remove('active'); btn.classList.add('active'); showTodo(btn.id); }); }); function updateStatus(selectedTask) { const taskName = selectedTask.parentElement.lastElementChild; if (selectedTask.checked) { taskName.classList.add('checked'); todos[selectedTask.id].status = 'completed'; } else { taskName.classList.remove('checked'); // todos[selectedTask.id].status = "pending"; } localStorage.setItem('todo-list', JSON.stringify(todos)); }

Traté de no usar acentos graves y crear cada uno de ellos usando createElement. sigo trabajando de esa manera