添加复选框，然后单击一个按钮以记录到 Firebase答案

【问题标题】：Add checkbox and then click a button to record into firebase添加复选框，然后单击一个按钮以记录到 Firebase
【发布时间】：2020-06-01 02:24:24
【问题描述】：

我目前正在开发一个使用 firebase 的网络应用程序，教师可以在该应用程序中预订学校的房间。到目前为止的代码如下：

app.js：

const roomList = document.querySelector('#room-list');
function renderRoom(doc){
    let li = document.createElement('li');
    let buildingNumber = document.createElement('spam');
    let floorNumber = document.createElement('span');
    let roomNumber = document.createElement('span');
    let block = document.createElement('span');
    let firstName = document.createElement('span');
    let lastName = document.createElement('span');
    li.setAttribute('data-id', doc.id);
    buildingNumber.textContent = 'Room: ' + doc.data().buildingNumber + '-' + doc.data().floorNumber + doc.data().roomNumber;
    block.textContent = 'Block: ' + doc.data().block;
    firstName.textContent = 'First Name: ' + doc.data().firstName;
    lastName.textContent = 'Last Name: ' + doc.data().lastName;
    li.appendChild(buildingNumber);
    li.appendChild(floorNumber);
    li.appendChild(roomNumber);
    li.appendChild(block);
    li.appendChild(firstName);
    li.appendChild(lastName);
    roomList.appendChild(li); 
}
db.collection('rooms').where('buildingNumber', '==' , '5').where('floorNumber' , '==' , '1').onSnapshot(snapshot =>  {
    let changes = snapshot.docChanges();
    changes.forEach(change => {
        if(change.type == 'added'){
            renderRoom(change.doc);
        } else if (change.type == 'removed'){
            let li = roomList.querySelector('[data-id = ' + change.doc.id + ']');
            roomList.removeChild(li);
        }
    })
})

app.html:

<!DOCTYPE html>
<html>
    <head>
    <link rel = "stylesheet" href = "Styles.css">
    </head>
    <body>
        <h1>Select the room:</h1>
        <div class = "content">
        <form id = "add-room-list"></form>
        <ul id = "room-list"></ul>
        </div>
        <!-- The core Firebase JS SDK is always required and must be listed first -->
        <script src="https://www.gstatic.com/firebasejs/7.14.5/firebase-app.js"></script>
        <script src="https://www.gstatic.com/firebasejs/7.14.5/firebase-firestore.js"></script>

        <!-- TODO: Add SDKs for Firebase products that you want to use
            https://firebase.google.com/docs/web/setup#available-libraries -->

        <script>
        // Your web app's Firebase configuration
        var firebaseConfig = {
            apiKey: "AIzaSyDNB4Ag8hXa_FDEYdWmQ2H_GMVBpWm1-0k",
            authDomain: "internal-assessment-20dd7.firebaseapp.com",
            databaseURL: "https://internal-assessment-20dd7.firebaseio.com",
            projectId: "internal-assessment-20dd7",
            storageBucket: "internal-assessment-20dd7.appspot.com",
            messagingSenderId: "905998751828",
            appId: "1:905998751828:web:1d88f0d2f655eb6141f5c1"
        };
        // Initialize Firebase
        firebase.initializeApp(firebaseConfig);
        const db = firebase.firestore();
        </script>
    </form>
    </body>
</html>

当前显示有人进入的房间。我想知道如何在每个房间的左侧添加一个复选框，以便您可以单击它，然后单击一个按钮，它将所选房间记录到 Firebase 中。谢谢。

【问题讨论】：

标签： javascript html firebase google-cloud-firestore

【解决方案1】：

首先，您需要将复选框中的值放入 Javascript 变量中，以便在 Firestore 集中使用它们。完成此操作后，将值保存到 Firestore 的代码应如下所示：

// Add a new document in the collection
db.collection("<your_collection>").doc("<your_doc>").set({
    field1: value1
    field2: value2
    ...
})
.then(function() {
    console.log("Document successfully written!");
})
.catch(function(error) {
    console.error("Error writing document: ", error);
});

此代码未经测试，没有您的集合和文档名称，但您应该在初始化与 Firestore 的连接后将其包含在您的 Javascript 中，以便您能够在其上进行编写。只需将您的 HTML 数据保存到变量中并更改集合和文档名称，您就可以使用它。

在这篇文章 - Adding Data to a Cloud Firestore Database - 您可以找到完整的教程，介绍如何将数据从 HTML 保存到 Firestore。

如果这些信息对您有帮助，请告诉我！

【讨论】：