添加复选框,然后点击按钮录入firebase。

我目前正在使用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变量中,这样你就可以在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);
});

这段代码是未经测试的,没有你的集合和文档名称,但你应该在你的Javascript中这样写,在你初始化你与Firestore的连接后,你就可以在上面写了。只需将你的HTML数据保存到变量中,并更改集合和文档名称,以便你能够使用它。

在这篇文章中 – 将数据添加到云Firestore数据库 – 你可以找到一个完整的教程,如何从HTML保存数据到Firestore。

让我知道,如果信息帮助你

给TA打赏
共{{data.count}}人
人已打赏
未分类

使用自定义主题颜色的getBackgrounds()中的BUG。

2022-11-13 21:05:23

未分类

"ValueError.Shapes (None, 1) and (None, 6) are incompatible 形状(无,1)和(无,6)不兼容"

2022-11-13 21:05:25

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索