我有一个显示名为“ShopModal”的模态的函数。在此模式中,我有一个名为 petDetailsButton 的按钮,我想检查它的 onClick 函数是否有效,但是当我在 onClick() 函数上编写 console.log 时,它不会在控制台上显示消息。
我尝试使用警报来通知是否单击了按钮,但它仍然不起作用。
下面是我的函数的代码片段:
async function GetAllShopData() {
const querySnapshot = await getDocs(collection(db,"Shop"));
const querySnapshot2 = await getDocs(collection(db,"User"));
const petQuerySnapshot = await getDocs(query(collection(db, "Pet"), where("displayFor", "==", "forSale")));
const serviceQuerySnapshot = await getDocs(collection(db,"Services"));
var shopCloseBtn = document.getElementById("shopCloseModalBtn");
var modal = document.getElementById("shopModal");
const span = document.getElementById("shop-span");
const petModal = document.getElementById("petDetailsModal");
var petForSale = document.getElementById("petsForSaleLabel");
const table = document.getElementById("shopTableBody");
var data = [];
querySnapshot.forEach(doc => {
const ownerIdNo = doc.data().breeder;
const shopName = doc.data().shopName;
let idNo = "";
let gender = "";
let birthday = "";
let address = "";
let firstName = "";
let middleName = "";
let lastName = "";
let fullName = "";
let role = "";
let status = "";
let petName = "";
let petBreed = "";
let serviceName = "";
let petArr = [];
let servArr = [];
querySnapshot2.forEach(doc => {
if (ownerIdNo === doc.data().idNo){
idNo = doc.data().idNo;
gender = doc.data().gender;
birthday = doc.data().birth;
address = doc.data().address;
firstName = doc.data().firstName;
middleName = doc.data().middleName;
lastName = doc.data().lastName;
fullName = [firstName, middleName, lastName].filter(Boolean).join(" ");
role = doc.data().role.join(", ");
status = doc.data().status;
}
});
petQuerySnapshot.forEach(doc => {
if(ownerIdNo === doc.data().pet_breeder){
const petDetailsButton = document.createElement("button");
petDetailsButton.innerHTML = '<i class="fa fa-eye" aria-hidden="true"></i>';
petDetailsButton.style.marginRight = "5px";
petDetailsButton.style.border = "0";
petDetailsButton.style.background = "transparent";
petDetailsButton.onclick = async function() {
console.log("clicked!") //does not display in console
}
const petArrItem = ` · ${doc.data().pet_name} - ${doc.data().pet_breed} ${petDetailsButton.outerHTML} ${'<br>'}`;
petArr += petArrItem;
}
});
serviceQuerySnapshot.forEach(doc => {
if(ownerIdNo === doc.data().shooter_id){
const servViewButton = document.createElement("button");
servViewButton.innerHTML = '<i class="fa fa-eye" aria-hidden="true"></i>';
servViewButton.style.marginRight = "5px";
servViewButton.style.border = "0";
servViewButton.style.background = "transparent";
servViewButton.onclick = async function() {
}
const servArrItem = ` · ${doc.data().name} ${servViewButton.outerHTML} ${'<br>'}`;
servArr += servArrItem;
}
});
const row = table.insertRow();
const ownerIdCell = row.insertCell();
ownerIdCell.innerText = ownerIdNo;
const shopNameCell = row.insertCell();
shopNameCell.innerText = shopName;
const statusCell = row.insertCell();
statusCell.innerText = status;
const actionCell = row.insertCell();
const editButton = document.createElement("button");
editButton.className = "editBtn";
editButton.innerHTML = '<i class="fa-solid fa-pen-to-square"></i>';
editButton.style.marginRight = "5px";
editButton.onclick = async function() {
modal.style.display = "block";
shopIdNoLabel.innerText = idNo;
shopFirstNameLabel.innerText = firstName;
shopMiddleNameLabel.innerText = middleName;
shopLastNameLabel.innerText = lastName;
shopGenderLabel.innerText = gender;
shopBirthdayLabel.innerText = birthday;
shopRoleLabel.innerText = role;
shopStatusLabel.innerText = status;
petsForSaleLabel.innerHTML = petArr;
serviceOfferedLabel.innerHTML = servArr;
}
span.onclick = function() {
modal.style.display = "none";
}
shopCloseBtn.onclick = function() {
modal.style.display = "none";
}
actionCell.appendChild(editButton);
const deleteButton = document.createElement("button");
deleteButton.className = "deleteBtn";
deleteButton.innerHTML = '<i class="fa-regular fa-trash-can"></i>';
deleteButton.onclick = async function() {
try {
window.confirm("Are you sure you want to delete this document?");
if(confirm == true)
{
await deleteDoc(doc.ref);
window.alert("Document successfully deleted!");
const row = deleteButton.closest("tr");
row.remove();
}
} catch (error) {
console.error("Error removing document: ", error);
}
};
actionCell.appendChild(deleteButton);
});
AddAllItemsToTable(data);
}