使用JS错误的防火墙修复数据库:未定义ReferenceError: doc未定义
使用JS错误的防火墙修复数据库:未定义ReferenceError: doc未定义
提问于 2020-04-13 03:11:56
因此，我目前正在开发我的项目，该项目使用了Google的Firebase Firestore数据库系统。在开始时，我只是添加了一些来自Firebase的代码来初始化它，还添加了一些代码来从它获得文档。所以，我的最初计划是基本的，就是从数据库中获取文档，然后将它添加到HTML文档中。在初始化之后，并在名为"db“的const中访问数据库时，标题(”Referenceerror.“)没有问题。如果我在控制台上测试它，它将正确地显示来自数据库的数据。但是，在我将一些JS代码添加到DOM并将数据添加到HTML之后，出现了错误。有人能帮帮我吗？我在Firebase这件事上真的是新手。但是，是的，我已经在很多论坛上搜索过这个问题，但是什么也没有发现。
1.)HTML
<script>
var firebaseConfig = {
apiKey: "AIzaSyARW1T5mnayv7XVsHnfP_uc0jO-ck11ykw",
authDomain: "sde-sale-stock.firebaseapp.com",
databaseURL: "https://sde-sale-stock.firebaseio.com",
projectId: "sde-sale-stock",
storageBucket: "sde-sale-stock.appspot.com",
messagingSenderId: "247739189879",
appId: "1:247739189879:web:0f809640941c5d3e341472",
measurementId: "G-VS6QCRD18K"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
const db = firebase.firestore();
</script>
<script src="js-in1.js"></script>2.)JS
//DOMstart
const docTarget = document.querySelector('#wrapper');
function insertDoc(){
//creation
let box = document.createElement('div');
let header = document.createElement('h4');
let hargaBeli = document.createElement('p');
let p2 = document.createElement('p');
let hargaJual = document.createElement('p');
let p4 = document.createElement('p');
//insertion
box.setAttribute('data-id', doc.id);
header.textContent = doc.data().name;
hargaBeli.innerHTML = "HB";
p2.textContent = doc.data().HB;
hargaJual.innerHTML = "HJ";
p4.textContent = doc.data().HJ;
//naming
box.classname = "box";
header.className = "title-box";
hargaBeli.className = "tc-1";
p2.className = "tc-2";
hargaJual.className = "tc-3";
p4.className = "tc-4";
//box-naming plus deletion ops
hitung++;
box.className = "box " + hitung;
box.onclick = function(){
if (confirm('Apa kamu yakin mau menghapus produk ini?')) {
this.parentElement.removeChild(this);
} else {
console.log('Tidak jadi menghapus produk.');
}
}
//appending...
box.appendChild(header);
box.appendChild(hargaJual);
box.appendChild(p2);
box.appendChild(hargaBeli);
box.appendChild(p4);
docTarget.appendChild(box);
console.log(box.className + "Creation Tracker"); //detection
}
//get doc
db.collection('Product').get().then((snapshot) => {
snapshot.docs.forEach(doc => {
console.log(doc.data());
insertDoc(doc);
})
})回答 1
Stack Overflow用户
回答已采纳
发布于 2020-04-13 10:19:37
在insertDoc() 函数的定义中，不包含任何参数，因此，在函数中，doc是未定义的。
除了使用insertDoc(doc)调用函数外，还需要将此doc作为参数添加到函数中，如下所示：
function insertDoc(doc) {
//....
//insertion
box.setAttribute('data-id', doc.id); // Now doc is defined
header.textContent = doc.data().name;
//....
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61181010
复制相关文章
相似问题
腾讯云开发者
