Javascript 仅为 forEach 循环中的最后一个元素创建事件侦听器

因为，您正在按ID捕获按钮.它将捕获记录的最后一个ID.

Instead use querySelector.

请try 下面的代码，这不是正确的代码，您需要根据错误消息进行调整.

get(ref(db, "chats")).then((snapshot) => {


    snapshot.forEach((child) => {
        var html = "";
        var childName = child.val().chatname;
        var childPassword = child.val().chatpassword;
        console.log(childName);
        html += `
        <li>
            <div class="chat-login-container">
            <h3>`+ childName + `</h3>
            <input type="hidden" class="childname" value="`+ childname + `">
            <input type="hidden" class="childPassword" value="`+ childPassword + `">
            <input id="`+ childName + `-input" class="password" type="password" placeholder="Enter Chat Password">
            <button id="`+ childName + `-button" class="login">Enter</button>
            </div>
        </li>
        `;
        messages.innerHTML += html;

    });
    const chatLoginContainers = document.querySelectorAll('.chat-login-container');
    chatLoginContainers.forEach((element) => {
        const loginBtn = element.querySelector('.login');
        loginBtn.addEventListener('click', (event) => {
            const childNameEle = event.target.closest('li').querySelector('.childname');
            const childPasswordEle = event.target.closest('li').querySelector('.childPassword');
            const passwordEle = event.target.closest('li').querySelector('.password');
            const childNameVal = childNameEle.value;
            const childPasswordVal = childPasswordEle.value;
            const passwordVal = passwordEle.value;
            get(ref(db, "chats/" + childNameVal)).then((snapshot) => {
                if (passwordVal == childPasswordVal) {
                    chat = childNameVal;
                    console.log("Logging in to " + childNameVal);
                    messages.innerHTML = "";
                    start();
                } else {
                    window.alert("Incorrect password, please try again");
                }
            }).catch((error) => {
                console.log(error);
            });
        })
    });

}).catch((error) => {
    console.log(error);
});