Tengo la siguiente pagina que es para agregar tareas, estoy usando json-server(db.json) y módulos.
Tengo un form con un input donde agrego la tarea a realizar, las tareas las guardo en un objeto, para después agregarla a la API con fetch, guardo las tareas en la API y las extraigo cuando el documento haya cargado y uso un forEach para recorrerlas y mostrarlas en el HTML, estoy usando template literals para crear el código HTML y mostrarlas en un div (contenedorTareas).
El problema que tengo es que quiero agregar un evento a un elemento dentro de los template literals, al input checkbox le agrego un evento con onClick="completo()"
, pero me sale el error de que la función no esta definida, he creado la función en varias partes del código, pero me sale siempre el mismo error. Igual al agregar funciones en cualquier elemento que este en los template literals, me sale el mismo error.
¿Cómo puedo solucionar esto o porque no puedo crearla?.
Este es mi HTML:
<head>
<title>Document</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css">
</head>
<body>
<header>
<div class="container">
<div class="row bg-white rounded p-2">
<div class="col-12">
<form class="formulario">
<div class="mb-3">
<label for="agregarTarea" class="form-label m-0 mb-2 h4">Tarea</label>
<input type="text" class="form-control tarea mb-3" id="agregar-tarea" aria-describedby="emailHelp">
<button type="submit" class="btn btn-primary btn-agregar">Agregar Tarea</button>
</div>
</form>
</div>
<div class="col-12 mt-5">
<div>
<h1>Tareas por realizar</h1>
<div class="lista-tareas">
</div>
</div>
</div>
</div>
</div>
</header>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/app.js" type="module"></script>
</body>
Este es mi app.js
:
import { agregarTareas,eliminarTarea,extraerTareas } from "./api.js";
document.addEventListener('DOMContentLoaded', extraerLasTareas)
const formulario = document.querySelector('.formulario');
const listaTareas = document.querySelector('.lista-tareas')
formulario.addEventListener('submit', agregarTarea);
listaTareas.addEventListener('click', eliminarTareaId);
function agregarTarea(e){
e.preventDefault();
const tarea = document.querySelector('#agregar-tarea').value;
if(tarea === ''){
console.log('Debe agregar una tarea')
return;
}
const tareaObj = {
tarea
}
agregarTareas(tareaObj)
formulario.reset();
}
async function extraerLasTareas(){
const tareas = await extraerTareas();
tareas.forEach(tareaIndividual => {
const {tarea,id} = tareaIndividual;
const contenedorTareas = document.createElement('div');
contenedorTareas.classList.add('d-flex', 'justify-content-between', 'flex-direction-column', 'align-items-center' , 'mb-3', 'contenedor');
contenedorTareas.innerHTML = `
<div class="d-flex align-items-center">
<input type="checkbox" id="completo" onClick="completo()">
</div>
<div>
<p class="m-0">${tarea}</p>
</div>
<div>
<a href="#" data-id="${id}"><i class="fas fa-trash btn-eliminar"></i></a>
</div>
</div>
`
listaTareas.appendChild(contenedorTareas)
})
}
function completo(){
console.log('Completo...')
}
function eliminarTareaId(e){
e.preventDefault();
if(e.target.classList.contains('btn-eliminar')){
const tareaId = Number(e.target.parentElement.dataset.id);
eliminarTarea(tareaId)
}
}
Y este es mi api.js
:
const url = 'http://localhost:4000/tareas';
export function agregarTareas(tarea){
try {
fetch(url, {
method:'POST',
body: JSON.stringify(tarea),
headers: {
"Content-Type": "application/json"
}
})
} catch (error) {
console.log(error)
}
}
export async function extraerTareas(){
try {
const respuesta = await fetch(url);
const resultado = await respuesta.json();
return resultado;
} catch (error) {
console.log(error)
}
}
export function eliminarTarea(tareaId){
try {
fetch(`${url}/${tareaId}`, {
method:'DELETE',
})
} catch (error) {
console.log(error)
}
}