im using firestore and trying to implement CRUD methods into my app,i successfully added and deleted and read documents however at the update,everytime i try to read some of the documents that i have added im getting the error Cannot read properties of null (reading 'querySelector') and i have no idea why it's occuring,the class exists,and it's being generated into html here is my code:
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);
}
the error occures at const titre = recette.queryselector and here is the html that's being generated using 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>
id appreciate any help i can get note:the getElementbyId was just a test to see if it works by using an id instead of a class,but it also didnt work which is why i prefer if i can get help on queryselector
Add an attribute for what the action is. Select the element with the attribute
<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>
and select it
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;
}
}