如何在模态按钮中添加 onClick 事件?

问题描述 投票:0回答:0

我有一个显示名为“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);
        }
javascript html modal-dialog
© www.soinside.com 2019 - 2024. All rights reserved.