estoy haciendo una lista de tareas solo con javascript y css. Cuando agrego la tarea, crea un artículo con iconos h1 y 2. El icono de verificación y el icono de eliminación. Cuando hago clic en el ícono de verificación, agrega la clase que cambia el estilo del texto a línea. El problema es que se aplica a todos los h1 y quiero que se aplique solo a un h1 específico.
function TaskName() { window.taskName = {}; window.taskName.handdleClick = () => { const $Task = document.querySelectorAll("h1"); $Task.forEach((e) => { e.classList.toggle("task-check"); }; window.taskName.delete = () => { ItemRemoval(); }; let $Input = document.getElementById("input-item"); let $task = $Input.value; return /*html*/ ` <article id='task-article'> <h1 id='task-name'>${$task}</h1> <img src='images/check 1.png' alt='Completar tarefa' onclick='taskName.handdleClick()' id='check-icon'> <img src='images/delete.svg' alt='Deletar tarefa' onclick='taskName.delete()' id='delete-icon'> </article> `; }Su problema comienza en la estructura de su código:
TaskName que hace muchas cosas: crear HTML, deleting algo de algún lugar, manejar un evento de clicwindow ) para manejar las cosas ¿Qué necesitas si quieres una aplicación Todo ?
Todo a la lista de todosTodo de la lista de todosTodo como done (OK, generalmente alterna entre done y not done )Aquí hay un fragmento que hace esto:
// list of todos & list manipulation functions let todos = [] const addTodo = (newTodo, todos) => [...todos, newTodo] const removeTodo = (idToRemove, todos) => todos.filter(({ id }) => idToRemove != id) const toggleTodoDone = (idToToggle, todos) => todos.map(({ id, done, ...rest }) => id == idToToggle ? { id, done: !done, ...rest } : { id, done, ...rest }) const getTodoItem = (label) => ({ id: Date.now(), done: false, label, }) // DOM manipulation & event handling const input = document.getElementById("input-add-todo") const btnAdd = document.getElementById("btn-add-todo") const container = document.getElementById("container") const resetInput = () => input.value = '' btnAdd.addEventListener('click', function() { const label = input.value if (label) { const newTodo = getTodoItem(label) todos = addTodo(newTodo, todos) updateContainer(container, todos) resetInput() } }) const getTodoHtml = (todo) => { const doneClass = todo.done ? ' done' : '' return ` <div class="todo-item${doneClass}" data-id="${todo.id}" > ${todo.label} - ${todo.done} <button class="remove-todo" data-id="${todo.id}">X</button> </div> ` } const getTodoListHtml = (todos) => todos.map(getTodoHtml).join('') const registerEventHandlers = (container) => { const els = document.querySelectorAll('.todo-item') els.forEach(el => el.addEventListener('click', function() { const id = el.dataset.id todos = toggleTodoDone(id, todos) updateContainer(container, todos) })) const btns = document.querySelectorAll('.remove-todo') btns.forEach(btn => btn.addEventListener('click', function(e) { e.stopPropagation() const id = btn.dataset.id todos = removeTodo(id, todos) updateContainer(container, todos) })) } const updateContainer = (container, todos) => { container.innerHTML = getTodoListHtml(todos) registerEventHandlers(container) } .todo-item { cursor: pointer; } .todo-item.done { text-decoration: line-through; } <div> <input type="text" id="input-add-todo" /> <button id="btn-add-todo">ADD TODO</button> </div> <div id="container"></div>