Meine Daten werden zweimal angezeigt, wenn die Daten ändern ⇐ JavaScript

[Anonymous]

Ich lerne Firebase und habe eine einfache HTML -Datei erstellt, in der ich Themen und Inhalte hochladen kann. Das Problem ist, dass der gesamte Container zweimal wiedergegeben wird, wenn ich neue Inhalte veröffentliche, einen Upvote durchführen oder einen Beitrag aus der Datenbank lösche. Wie kann ich dieses Problem beheben?

Code: Select all

import {
initializeApp
} from 'https://www.gstatic.com/firebasejs/11.4.0/firebase-app.js';

import {
getDatabase,
ref,
set,
push,
onValue,
update,
increment
} from 'https://www.gstatic.com/firebasejs/11.4.0/firebase-database.js';

import firebaseConfig from './configs.js'

const app = initializeApp(firebaseConfig);
const db = getDatabase();

var gossip_submit = document.querySelector("#gossip-submit")

gossip_submit.addEventListener('click', (e) => sendGossip(e))

function sendGossip(e) {
var gossip_title = document.querySelector('#gossip_title').value
var gossip_content = document.querySelector('#gossip_content').value

if (gossip_title == "" || gossip_content == "") {
alert("Empty fields detected.")
return
}
e.preventDefault()
console.log("clicked")
console.log(gossip_title)
console.log(gossip_content)
document.querySelector('#gossip_title').value = "";
document.querySelector('#gossip_content').value = "";

writeUserData(gossip_title, gossip_content)
}

function writeUserData(gossip_title, gossip_content) {
var post_unique_key = push(ref(db, 'posts/')).key
set(ref(db, 'posts/' + post_unique_key), {
gossip_title: gossip_title,
gossip_content: gossip_content,
upvotes: 0,
downvotes: 0,
timestamp: new Date().getTime(),
comments: {}
});

}

function getDataWithKey(key) {
onValue(ref(db, 'posts/' + key), (snapshot) => {
const data = snapshot.val();
console.log(data)
});
}

let gossip_container = document.querySelector('.gossip-container')

function getAllData() {
gossip_container.innerHTML = '';
onValue(ref(db, 'posts/'), (snapshot) =>  {
const data = snapshot.val();
for (const key in data) {
console.log(data[key])
let card_div = document.createElement('div')
card_div.classList.add('card')
let card_body = document.createElement('div')
card_body.classList.add('card-body')
let card_title = document.createElement('h5')
card_title.classList.add('card-title')
card_title.innerText = data[key].gossip_title
let card_text = document.createElement('p')
card_text.classList.add('card-text')

let span_downvote = document.createElement('span')
span_downvote.classList.add('downvote')
span_downvote.innerHTML = '
'
let span_upvote = document.createElement('span')
span_upvote.classList.add('upvote')
span_upvote.innerHTML = ''

card_text.innerText = data[key].gossip_content
card_body.appendChild(card_title)
card_body.appendChild(card_text)
card_body.appendChild(span_upvote)
card_body.appendChild(span_downvote)
card_div.appendChild(card_body)
gossip_container.appendChild(card_div)

span_upvote.addEventListener('click', function() {
span_upvote.classList.toggle('on');
span_downvote.classList.remove('on');
console.log('upvote:', span_upvote.classList.contains('on'));
// updateUpvoteCount(key)
console.log(card_text.innerText)
console.log(key)

});
span_downvote.addEventListener('click', function() {
span_downvote.classList.toggle('on');
span_upvote.classList.remove('on');
console.log('downvote:', span_downvote.classList.contains('on'));
console.log(key)

});
}
});
}

getAllData()< /code>



What do u want to gossip about?


What do u want to say?


submit