estoy usando firestore y tratando de implementar métodos CRUD en mi aplicación, agregué, eliminé y leí documentos con éxito; sin embargo, en la actualización, cada vez que intento leer algunos de los documentos que he agregado, aparece el error Cannot read properties of null (reading 'querySelector') y no tengo idea de por qué está ocurriendo, la clase existe y se está generando en html aquí está mi código:
const recettecontainer = document.querySelector('.recettes'); recettecontainer.addEventListener('click', evt =>{ //console.log(evt); if(evt.target.tagName === 'I'){ const id= evt.target.getAttribute('data-id'); //db.collection('Recettes').doc(id).delete(); } if(evt.target.textContent ==='edit'){ const id =evt.target.getAttribute('data-id'); const recette = document.querySelector(`.recette[data-id="${id}"]`); const titre = recette.querySelector('.titre').innerHTML; const type = recette.getElementById('.type').InnerHTML; console.log(titre,type); } el error ocurre en const titre = recette.queryselector y aquí está el html que se genera usando javascript:
<div class = "recette" data-id="${id}"> <tr class = "recette"> <td class="titre">${data.titre}</td> <td class="type">${data.type}</td> <td>${data.operateur}</td> <td>${data.date}</td> <td>${data.control}</td> <td>${data.control1}</td> <td>${data.control2}</td> <td>${data.control3}</td> <td> ${data.control4}</td> <td> ${data.control5}</td> <td>${data.item1}</td> <td>${data.item2}</td> <td>${data.item3}</td> <td>${data.item4}</td> <td>${data.item5}</td> <td id="appadd">${data.additional}</td> <td><button data-id="${id}" data-target="side-form" ><i class="material-icons">edit</i></button></td> <td><div class="recipe-delete"> <i class="material-icons" data-id="${id}">delete_outline</i> </div> </td> </tr> </tbody>Agradezco cualquier ayuda que pueda obtener.
Agregue un atributo para lo que es la acción. Seleccione el elemento con el atributo
<td> <button data-id="${id}" data-target="side-form" data-action="edit"> <i class="material-icons">edit</i> </button> </td> <td> <div class="recipe-delete"> <i class="material-icons" data-id="${id}" data-action="delete" >delete_outline</i> </div> </td>y seleccionarlo
const recetteContainer = document.querySelector('.recettes'); recetteContainer.addEventListener('click', evt =>{ const elem = evt.target.closest('[data-action]'); if (elem) { evt.preventDefault(); const action = elem.dataset.action; const id = elem.dataset.id; switch (action) { case 'delete': console.log('delete', id); break; case 'edit': console.log('edit', id); break; } }