Блог

Я получил эту ошибку, когда при нажатии кнопки из одной строки моей таблицы

 data is not defined at HTMLButtonElement.GetADocument  

Что я хотел сделать, так это когда кнопка нажата, она возьмет идентификатор строки из firestore и отобразит подробную информацию о строке в моей форме.

Это функция, которую необходимо выполнить после нажатия кнопки:

 async function GetADocument(){  var ref = doc(firestore, "ordered", data.id);  const docSnap = await getDoc(ref)   if(docSnap.exists()){  boxEmail.value = docSnap.data().paidby;  boxDate.value = docSnap.data().boughtAt;  boxName.value = docSnap.data().cetegory;  boxQty.value = docSnap.data().amount;  boxAddress.value = docSnap.data().paidby;  boxCode.value = docSnap.data().code;  boxEstimation.value = docSnap.data().estimationDate;  boxStatus.value = docSnap.data().status;  }  else{  alert('No Document found')  }  }  

Это строка таблицы, содержащая кнопку, которая получит идентификатор из магазина firestore:

 const q = query(collection(firestore, "ordered"));  const unsubscribe = onSnapshot(q, (querySnapshot) =gt; {  querySnapshot.forEach((doc) =gt; {  let id = doc.id;  let data = doc.data();   const list = document.getElementById("tbody1");  const row = document.createElement("tr");   row.innerHTML  = `   lt;td class="grid-item"gt;${(data.paidby)}lt;/tdgt;  lt;td class="grid-item"gt;No. ${(data.numbur)}, Simpang ${(data.spg)}, Jalan ${(data.jln)}, ${(data.district)}, ${(data.code)}lt;/tdgt;  lt;td class="grid-item"gt;${(data.product)} (${(data.amount)})lt;/tdgt;  lt;td class="grid-item"gt;${(data.status)}lt;/tdgt;  lt;td class="grid-item"gt;  lt;button type="button" id="viewDetail" class="btn btn-primary btn-primary my-2 ml-2" data-id="${id}"gt;View Detailslt;/buttongt;  lt;/tdgt;  `;   list.appendChild(row);   let detailView = document.getElementById('viewDetail');   detailView.addEventListener('click', GetADocument);  });    });  

И, это отображение формы:

 lt;formgt;  lt;div class="form-group row"gt;  lt;label for="emailBox" class="col-sm-2 col-form-label"gt;User's Emaillt;/labelgt;  lt;div class="col-sm-10"gt;  lt;input type="email" readonly class="form-control" id="emailBox" aria-describedby="emailHelp" placeholder="Enter email"gt;  lt;/divgt;  lt;/divgt;  lt;div class="form-group row"gt;  lt;label for="dateBox" class="col-sm-2 col-form-label"gt;Bought Atlt;/labelgt;  lt;div class="col-sm-10"gt;  lt;input type="text" readonly class="form-control" id="dateBox" placeholder="Bought Date"gt;  lt;/divgt;  lt;/divgt;  lt;div class="form-group row"gt;  lt;label for="nameBox" class="col-sm-2 col-form-label"gt;Item Boughtlt;/labelgt;  lt;div class="col-sm-10"gt;  lt;input type="text" readonly class="form-control" id="nameBox" placeholder="Item Bought"gt;  lt;/divgt;  lt;/divgt;  lt;div class="form-group row"gt;  lt;label for="qtyBox" class="col-sm-2 col-form-label"gt;Quantitylt;/labelgt;  lt;div class="col-sm-10"gt;  lt;input type="text" readonly class="form-control" id="qtyBox" placeholder="Quantity"gt;  lt;/divgt;  lt;/divgt;  lt;div class="form-group row"gt;  lt;label for="addressBox" class="col-sm-2 col-form-label"gt;Addresslt;/labelgt;  lt;div class="col-sm-10"gt;  lt;input type="text" readonly class="form-control" id="addressBox" placeholder="Address"gt;  lt;/divgt;  lt;/divgt;  lt;div class="form-group row"gt;  lt;label for="codeBox" class="col-sm-2 col-form-label"gt;Address Codelt;/labelgt;  lt;div class="col-sm-10"gt;  lt;input type="text" readonly class="form-control" id="codeBox" placeholder="Address Code"gt;  lt;/divgt;  lt;/divgt;  lt;div class="form-group row"gt;  lt;label for="estimationBox" class="col-sm-2 col-form-label"gt;Estimation Datelt;/labelgt;  lt;div class="col-sm-10"gt;  lt;input type="text" readonly class="form-control" id="estimationBox" placeholder="Estimation Date"gt;  lt;/divgt;  lt;/divgt;  lt;div class="form-group row"gt;  lt;label for="statusBox" class="col-sm-2 col-form-label"gt;Statuslt;/labelgt;  lt;div class="col-sm-10"gt;  lt;input type="text" readonly class="form-control" id="statusBox" placeholder="Status"gt;  lt;/divgt;  lt;/divgt;  lt;button type="submit" class="btn btn-primary"gt;Update Status to Deliveredlt;/buttongt;  lt;button type="submit" class="btn btn-danger"gt;Delete Recordlt;/buttongt;  lt;/formgt;  

And how I declare the inputbox in the JavaScript is like this:

 let boxEmail = document.getElementById('emailBox');  let boxDate = document.getElementById('dateBox');  let boxName = document.getElementById('namaeBox');  let boxQty = document.getElementById('qtyBox');  let boxAddress = document.getElementById('addressBox');  let boxCode = document.getElementById('codeBox');  let boxEstimation = document.getElementById('estimationBox');  let boxStatus = document.getElementById('statusBox');  

Я думаю, что что-то не так в моей декларации идентификатора, которая находится во втором коде data-id="${id}" , а также в том, как я ссылаюсь на идентификатор данных. Кто-нибудь, пожалуйста, может мне помочь?