无法读取 null 的属性(读取"查询选择器")

Question

我使用firestore并试图在我的应用程序中实现CRUD方法，我成功添加和删除并读取文档，但在更新时，每次我尝试读取我添加的一些文档时，我得到错误无法读取null的属性(读取'querySelector')，我不知道为什么会发生，类存在，它被生成为html这里是我的代码:

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);
}

错误发生在const titre = recette.queryselector，这里是正在使用javascript生成的html:

<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>

我很感激我能得到的任何帮助注意:getElementbyId只是一个测试，看看它是否使用id而不是一个类的工作，但它也没有工作，这就是为什么我更喜欢，如果我能得到帮助在queryselector

Answer 1

为动作添加一个属性。选择带有

属性的元素

<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>

，选择

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;
}
}