Итак, недавно я создал проект, в котором Javascript просто создает элемент и получает данные из базы данных Firebase Firestore, а затем добавляет его в тело HTML. Он состоит из div, который действует как контейнер box с object.className, h4 выступает в качестве заголовка, некоторые p как тексты. Но все эти элементы, которые я добавил, не видны на веб-странице. Но удивительно, что если я открою элемент Inspect и вызову console.log(object) одного из объектов, они покажут элемент тега HTML именно того, что я хочу, и когда я наведу на него курсор, он отобразит выделенную область в веб-страница, которая размером именно то, что я хочу. Но визуально все еще не видно. На самом деле, в документе HTML я добавил несколько полей и элементов перед элементом из Javascript, и если я добавлю какой-то новый элемент из HTML, элемент из Javascript будет добавлен после нового добавленного элемент из HTML. Итак, кто-то может мне помочь? Я новичок ie в этой области. Спасибо.
1.) Часть элемента HTML (База Файра хорошо настроена здесь)
<body>
<div class="big-container">
<div class="title">
<span class="title-text">Kompor</span>
</div>
<nav id="wrapper">
<!-- ONE DIV CALLED "IMPORTANT" is necessary for the last box visible -->
<div onclick="" class="box">
<h4 class="title-box">Rinnai 522-E</h4>
<p class="tc-1">HB</p>
<p class="tc-2">313.000</p>
<p class="tc-3">HJ</p>
<p class="tc-4">345.000</p>
</div>
<div onclick="" class="box 2">
<h4 class="title-box">Rinnai 522-A</h4>
<p class="tc-1">HB</p>
<p class="tc-2">313.000</p>
<p class="tc-3">HJ</p>
<p class="tc-4">345.000</p>
</div>
<div onclick="" class="box">
<h4 class="title-box">Rinnai 522-E</h4>
<p class="tc-1">HB</p>
<p class="tc-2">313.000</p>
<p class="tc-3">HJ</p>
<p class="tc-4">345.000</p>
</div>
<div onclick="" class="box">
<h4 class="title-box">Rinnai 522-E</h4>
<p class="tc-1">HB</p>
<p class="tc-2">313.000</p>
<p class="tc-3">HJ</p>
<p class="tc-4">345.000</p>
</div>
<div onclick="" class="box">
<h4 class="title-box">Rinnai 522-E</h4>
<p class="tc-1">HB</p>
<p class="tc-2">313.000</p>
<p class="tc-3">HJ</p>
<p class="tc-4">345.000</p>
</div>
<div onclick="" class="box">
<h4 class="title-box">Rinnai 522-E</h4>
<p class="tc-1">HB</p>
<p class="tc-2">313.000</p>
<p class="tc-3">HJ</p>
<p class="tc-4">345.000</p>
</div>
<div class="box"></div>
<div class="box"></div>
<div class="important"></div>
</nav>
</div>
2.) JS
//DOMstart
const docTarget = document.querySelector('#wrapper');
function insertDoc(doc){
//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
header.textContent = doc.data().name;
hargaBeli.innerHTML = "HB";
p2.textContent = doc.data().HB;
hargaJual.innerHTML = "HJ";
p4.textContent = doc.data().HJ;
console.log(box);
console.log(header);
console.log(hargaBeli);
console.log(p2);
console.log(hargaJual);
console.log(p4);
//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
var hitung = 1;
hitung++;
console.log(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
var doc;
db.collection('Product').get().then((snapshot) => {
snapshot.docs.forEach(doc => {
insertDoc(doc);
})
})
CSS хорошо подключен, и, как вы можете видеть, хорошо работает с этими элементами из HTML документа.